`Uncaught TypeError: Cannot read property 'length' of null` (vuejs + chart.js)

Hello,

I am trying to use Chart.js with vuejs. Unfortunately, I’m already blocked from trying out the “beginners” example’…

Here’s my Vue Component:

<template>
  <canvas id="myChart" width="400" height="400"></canvas>
</template>

<script>
/*eslint-disable*/
import Chart from '../../node_modules/chart.js/src/Chart.js'
let ctx = document.getElementById("myChart")

var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3]
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});

export default {
  name: 'dashboard',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

And the error I get: Uncaught TypeError: Cannot read property 'length' of null

[Kinzowa]

Oh I see, <canvas>...</canvas> need to be declared before <script>...</script>

👍

[gkatsanos]

@HornKild read my last/previous comment. The error was due to the element not being present in the HTML when Chart.js was trying to attach the chart on it.