Vue-chartjs: Can't update chart periodically

Created on 14 Dec 2017 · 2Comments · Source: apertureless/vue-chartjs

Expected Behavior

I am trying to update my chart every 3 seconds (with setInternal) by passing the prop to child component. In parent's mounted() call, I first populate the dataset with 10 "starting" values using method nextTick() - this works fine and the chart is created.

Template:

<div class="main">
  <div class="inner">
    <PriceChart :chartData="data"/>
  </div>
</div>

JS:

import PriceChart from '@/components/PriceChart';

export default {
  name: 'MainContent',
  data() {
    return {
      data: {}
    };
  },

  mounted() {
    this.data = { labels: [], datasets: [{data: []}] }

    for (var i = 0; i < 10; i++) {
      this.nextTick();
    }

    // setInterval(this.nextTick, 3000)
  },

  methods: {
    nextTick() {
      let now = +new Date();

      this.data.labels.push(now);
      this.data.datasets[0].data.push(
        {t:now,y:Math.random()*2000}
      )

      // give us some more time
      for (var i = 0, n = 0, z = Math.random()*10000000; i < z; i++) {
        n += i;
      }
    }
  },

  components: { PriceChart },
};

This is the PriceChart component:

import { Line, mixins } from 'vue-chartjs'

export default {
  extends: Line,
  mixins: [mixins.reactiveProp],
  props: ['chartData'],
  data() {
    return {
      options: {},
    }
  },
  mounted () {
    // Overwriting base render method with actual data.
    this.renderChart(this.chartData, this.options)
  },
}

Actual Behavior

If I uncomment the setInterval call in mounted(), the chart will still be generated, however the data will not change every 3 seconds. Additionally, when hovered over the chart, error is printed to the console:

Uncaught TypeError: Cannot read property 'skip' of undefined
    at parseVisibleItems (webpack-internal:///./node_modules/chart.js/src/core/core.interaction.js:39:23)
    at x (webpack-internal:///./node_modules/chart.js/src/core/core.interaction.js:281:4)
    at Chart.getElementsAtEventForMode (webpack-internal:///./node_modules/chart.js/src/core/core.controller.js:643:12)
    at Chart.handleEvent (webpack-internal:///./node_modules/chart.js/src/core/core.controller.js:863:20)
    at Chart.eventHandler (webpack-internal:///./node_modules/chart.js/src/core/core.controller.js:821:21)
    at listener (webpack-internal:///./node_modules/chart.js/src/core/core.controller.js:758:21)
    at HTMLCanvasElement.proxies.(anonymous function) (webpack-internal:///./node_modules/chart.js/src/platforms/platform.dom.js:410:4)

Environment

vue.js version: 2.5.2
vue-chart.js version: 3.0.2
npm version: 5.5.1

❓ question

Source

artuross

All 2 comments

OK, I think I got it working. The solution is to always assign new object to this.data instead of updating its values. Still trying to figure out what causes this.

artuross on 14 Dec 2017

May be related to this