Vue Chart.js component does not render

Question

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.

What is "if (this.data) {" ? and how are you updating chdata ? check my reply here: https://stackoverflow.com/questions/43728332/vue-chart-js-chart-is-not-updating-when-data-is-changing/43728989#43728989 to see if helps — Gerardo Rosciano, May 02 '17 at 02:11

score 2 · Accepted Answer · answered Jun 21 '17 at 13:53

2

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.

answered Jun 21 '17 at 13:53

Jakub Juszczak

7,126
3
21
38

Vue Chart.js component does not render

1 Answers1