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
@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.
Oh I see,
<canvas>...</canvas>
need to be declared before<script>...</script>
do not put the chart in created …..just put it in mounted .
it just about the timing.