Chartjs-How to update data from ajax call (chart.js)

by

0👍

There isn’t a need to generate a new chart. Once the chart exists all you need to do is to edit the datasets and call the chart update function to re-render the chart.

e.g (example is using angular in my case but still should apply):

HTML:

<mat-select [(value)]="selectedFilter" (selectionChange)="filterStreamType()">

JS:

public filterStreamType() {
    // code manipulates data....
    this.chart.data.datasets = newData; // update our dataset so chart js can re-draw it   
    this.chart.update(); // This is a redundant call but I did a bad job here and mixed some things that should not be mixed and so
}

Also note that between V2 and V3 there have been breaking changes so this syntax may vary a bit depending on the version you use.

Leave a comment