[Chartjs]-Draw asynchronous information on a graph with VueJS

by

3👍

✅

VueJS uses Virtual DOM (like ReactJS) and

Vue is a jealous library in the sense that you must let it completely
own the patch of DOM that you give it (defined by what you pass to
el).

src: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Therefore, library that modify the DOM directly doesn’t work well with VueJS. For e.g. chartjs, jquery, etc…

labels: this.labels,,data: this.data, won’t receive the updated data after your asynchronous function completes. In short, it’s not a Vue component and does not work with Vue’s reactivity system.

Luckily, people already made a Vue compatible ChartJs integration library(https://github.com/apertureless/vue-chartjs) and it can work with VueJS reacivity system.

example: https://codepen.io/jacobgoh101/pen/YezPLg?editors=0010

You will need to use this mixin VueChartJs.mixins.reactiveProp from the library to make the chart reactive.

HTML

<div class="app">
    {{ message }}
  <line-chart :chart-data="chartData" :options="options"></line-chart>
</div>

JS

Vue.component("line-chart", {
  extends: VueChartJs.Line,
  props: ["chartData", "options"],
  mixins: [VueChartJs.mixins.reactiveProp],
  mounted() {
    this.renderChart(this.chartData, this.options);
  }
});

var vm = new Vue({
  el: ".app",
  data: {
    message: "Hello World",
    chartData: null,
    options: { responsive: true, maintainAspectRatio: false }
  },
  mounted() {
    this.sampleAsync();
  },
  methods: {
    sampleAsync() {
      setTimeout(() => {
        this.chartData = {
          labels: [
            "January",
            "February",
            "March",
            "April",
            "May",
            "June",
            "July"
          ],
          datasets: [
            {
              label: "Data One",
              backgroundColor: "#f87979",
              data: [40, 39, 10, 40, 39, 80, 40]
            }
          ]
        };
      }, 1000);
    }
  }
});

Leave a comment