Ionic 3 Angular Chart.js update data

Question

I am using Chart.js with my Ionic 3 Angular app. All works fine, except I am unable to refresh the data for the bar that actually changed.

Here is the code:

ionViewDidLoad(){
    this.barChart = new Chart(this.barCanvas.nativeElement, 
    {
        type: 'bar',
        data: {
            labels: ["Safeway", "CVS", "Walgreens", "Bon Appetit"],
            datasets: [{
                label: "Pepsi",
                backgroundColor: "#002F6F",
                data: this.pepsiData
            }, {
                label: "Coke",
                backgroundColor: "#F50000",
                data: this.cockData
            }, {
                label: "V8",
                backgroundColor: "orange",
                data: [83,19,32,34]
            }]
        },
        options: {
            title: {
                display: true,
                text: 'Brands'
            }
        }
    });
}

A separate button update the data for pepsiData array as:

this.pepsiData[3] = 80;

But this does not refresh the particular bar. The ugly solution I have now is to redraw the entire chart, which looks like a bad solution.

This is the init function, right? Where is the refresh logic? Where are you triggering refresh? — SrAxi
– SrAxi, Commented Jul 19, 2017 at 8:19
I'd suspect you'd need to be subscribing to something and use an event handler to listen to and repaint your chart based on changed data. If it's from a form be sure to use ReactiveFormsModule. You can subscribe to change events and use that to repaint. Without seeing whole solution and when data changes it's hard to give a definitive answer. — JGFMK
– JGFMK, Commented Jul 19, 2017 at 8:27
after change data, you need to call this.barChart.update() — Duannx
– Duannx, Commented Jul 19, 2017 at 8:37

Tot Zam · Accepted Answer · 2018-01-02 01:35:42Z

2

As mentioned in the Chart.js documentation, you need to call chart.update() if you wish to update the data in your chart after it was created:

http://www.chartjs.org/docs/latest/developers/updates.html

Example of adding data and then updating the chart:

function addData(chart, label, data) {
    chart.data.labels.push(label);
    chart.data.datasets.forEach((dataset) => {
        dataset.data.push(data);
    });
    chart.update();
}

After you finish changing the data in your update function, you just need to add the update line of code like the following:

this.pepsiData[3] = 80;
myChart.update();

edited Jan 2, 2018 at 1:35

answered Jul 19, 2017 at 14:26

Tot Zam

8,84411 gold badges55 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

Ionic 3 Angular Chart.js update data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related