Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vue Chart.js component does not render

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.

like image 918
stsdc Avatar asked Nov 07 '22 22:11

stsdc


1 Answers

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.

like image 102
Jakub Juszczak Avatar answered Nov 14 '22 22:11

Jakub Juszczak