How to update a chart using VueJS and ChartJS

Question

I'm trying to update a chart using VueJS and ChartJS and so far i can access every property of the object but if i try to change the object's property i get an error :

[Vue warn]: Error in mounted hook: "TypeError: _chart_data_js__WEBPACK_IMPORTED_MODULE_5__.planetChartData.update is not a function"

I went to ChartJS's tutorial section and issues sections but i couldn't find any clue for this problem. What i find strange is that the 'push' function is working perfectly fine. So far what i'v try is :

.vue file

<template>
            <div id="app" style="position: relative; height:500px; width:500px">
                <canvas :width="300" :height="300" id="planet-chart"></canvas>
            </div>


 </template>

...

import { mapActions, mapState } from 'vuex'
import Chart from 'chart.js';
import {planetChartData,pie} from './chart-data.js';
// import { mapActions } from 'vuex'
// import { connectionsAlive } from '../../api/mkt-api.js'
export default {
    mounted() {
        var x=this.createChart('planet-chart', this.planetChartData)
        planetChartData.data.labels.push('Janvier', 'Février')
        planetChartData.update();
    },
    data () {
        return {
            planetChartData: planetChartData,
        }
    },
    methods: {
        createChart(chartId, chartData) {
            const ctx = document.getElementById(chartId);
            const myChart = new Chart(ctx, {
            type: chartData.type,
            data: chartData.data,
            options: chartData.options,
            });
        }
    }
}
</script>

And .js file

export const planetChartData = {
    type: 'bar',
    data: {
      labels: ['Janvier', 'Février', 'Mars', 'Avril'],
      datasets: [
        { // one line graph
          label: 'Number of users',
          data: [3018, 3407, 3109,1060],
          backgroundColor: [
            'rgba(54,73,93,.5)', // Blue
            'rgba(54,73,93,.5)',
            'rgba(54,73,93,.5)',
            'rgba(54,73,93,.5)'
          ],
          borderColor: [
            '#36495d',
            '#36495d',
            '#36495d',
            '#36495d'
          ],
          borderWidth: 3
        },
      ]
    },
    options: {
      responsive: true,
      lineTension: 1,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true,
            padding: 40,
          }
        }]
      }
    }
  }

Maybe i'm using the wrong syntax, if anyone has an idea let me know, thanks. Regards.

lipsumar · Accepted Answer · 2019-04-15 09:00:34Z

3

In the vue file, planetChartData is a reference to the object "planetChartData" from your js file. It is not a reference to the chart you create in createChart()

What you want is to return the created chart, so you can call update() on it:

createChart(chartId, chartData) {
  const ctx = document.getElementById(chartId);
  const myChart = new Chart(ctx, {
    type: chartData.type,
    data: chartData.data,
    options: chartData.options,
  });
  return myChart // <<< this returns the created chart
}

Then in mounted you can do this:

var chart = this.createChart('planet-chart', planetChartData)
chart.update();

answered Apr 15, 2019 at 9:00

lipsumar

1,0119 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Quentin_otd Over a year ago

thanks a lot it worked that way, i'll give the vue-chartjs way a try too

Collectives™ on Stack Overflow

How to update a chart using VueJS and ChartJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related