Learn Chart.js

Updating charts

You can use JavaScript functions and libraries to change your data dynamically, but the changes will not be reflected immediately in your chart. After changing data, you have to call update() in order to redraw it. For this, you will need a variable reference to the chart object, as follows:

const ch = new Chart("ocean-volume-bar-chart", {...});

The following example toggles the data in the chart, replacing the values in the dataset with a different array, and changing labels, titles, and colors. The toggle() function is registered as a click event listener on the canvas. Whenever you click anywhere in the canvas it will run, change the values of several properties, and call update(),which forces the chart to transition to ...