Chart js update multiple charts

Question

I've seen many tutorials on how to add data in chart.js, but it's all for a single chart.

I use chartjs to create multiple charts (each one has its own canvas with an unique ID). For example: Chart 1 is in a canvas with id="c1" and chart 2 is in a canvas with id="c2". How can I select chart 1 and add new data?

Answer 1

If you have only two charts, you can just create two different Chart objects and work on individual charts by their objects.

ctx1 = document.getElementById("c1");
ctx2 = document.getElementById("c2");
myPieChart = new Chart(ctx, {
              type: 'pie',
              data: data1
            });
myLineChart = new Chart(ctx, {
              type: 'line',
              data: data1
            });

To dynamically add new data to an existing chart,

function updateChart(newData){
    var length = myLineChart.options.data[0].dataPoints.length;
    chart.options.data[0].dataPoints.push({ y: newData});
    chart.render();
}