Dashboard gets data array with 10 elements as chdata
property. Every 0.5s array updates with new item. I can see, that data are changing in dataset, but chart isn't showing.
Also getting this error Uncaught TypeError: Cannot read property 'skip' of undefined
when hover.
//LineChart.vue
<script>
import {
Line,
mixins
} from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveData],
props: ["options"],
data() {
return {
chartData: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
datasets: [{
label: 'Data One',
borderColor: '#e67e22',
pointBackgroundColor: '#e67e22',
borderWidth: 1,
pointBorderColor: '#e67e22',
backgroundColor: 'transparent',
data: this.$root.$data.chdata
}]
},
}
},
mounted() {
this.renderChart(this.chartData, {
responsive: true,
maintainAspectRatio: false,
animation: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 20,
//Number - The value jump in the hard coded scale
scaleStepWidth: 10,
//Number - The scale starting value
scaleStartValue: 0
});
},
watch: {
chartData: function() {
this._chart.destroy()
this.renderChart(this.data, this.options)
// this._chart.update()
}
}
});
</script>
I made this in mounted()
:
var self = this;
self.set = setInterval(function() {
self._chart.update()
}, 200);
And I'm not happy with it.
The problem is, that you're not updating the labels. You define 10 items in your labels array. This works for 10 data entries.
If you push a new entry to your data array, you also need to add a new label. Otherwise chart.js will throw this error.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With