[Chartjs]-Why are my two charts repeating the same label?

by

2👍

✅

Because they are sharing a reference to the same data object. When you invoke the addData method, they are both changing the same object. Provide different data objects to each instance, you can still share the options, assuming you want them to be the same.

https://jsfiddle.net/onug1tdy/

var marchData = {
    labels: [],
    datasets: [
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)"
        }
    ]
};
var febData = {
    labels: [],
    datasets: [
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)"
        }
    ]
};
var options = {
    animation: true,
    responsive: true
};



var ctx1 = document.getElementById("february-chart").getContext("2d");
februaryChart = new Chart(ctx1).Bar(febData, options);

var ctx2 = document.getElementById("march-chart").getContext("2d");
marchChart = new Chart(ctx2).Bar(marchData, options);


februaryChart.addData([2], 'aaaa');
marchChart.addData([5], 'bbbb');

Leave a comment