How to push datasets dynamically for chart.js (bar chart)?

Question

Im using chartjs (bar chart) to display some data. Im trying to dynamically add data to datasets array but its not working.

for example, lets say I have 2 objects in datasets array, and I dynamically creating this object and trying to push him into datasets (from Chrome console) after the page loaded and chart is already up.

var e = {
                fillColor : "#efefef",
                strokeColor : "#efefef",
                highlightFill: "#efefef",
                highlightStroke: "#efefef",
                data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }

and then

barChartData.datasets.push(e)

I also tried to do window.myBar.update() but again nothing happend.

Do you know this issue? Thanks,

potatopeelings · Accepted Answer · 2015-06-27 05:12:01Z

17

I don't think you can use addData to add a series - it's for adding points / bars to existing series.

However you can insert your new series directly into the chart object. With the chart object and new dataset like so

var ctx = document.getElementById("chart").getContext("2d");
var myBarChart = new Chart(ctx).Bar(data);

var myNewDataset = {
    label: "My Second dataset",
    fillColor: "rgba(187,205,151,0.5)",
    strokeColor: "rgba(187,205,151,0.8)",
    highlightFill: "rgba(187,205,151,0.75)",
    highlightStroke: "rgba(187,205,151,1)",
    data: [48, 40, 19, 86, 27, 90, 28]
}

the code to insert a new dataset would be

var bars = []
myNewDataset.data.forEach(function (value, i) {
    bars.push(new myBarChart.BarClass({
        value: value,
        label: myBarChart.datasets[0].bars[i].label,
        x: myBarChart.scale.calculateBarX(myBarChart.datasets.length + 1, myBarChart.datasets.length, i),
        y: myBarChart.scale.endPoint,
        width: myBarChart.scale.calculateBarWidth(myBarChart.datasets.length + 1),
        base: myBarChart.scale.endPoint,
        strokeColor: myNewDataset.strokeColor,
        fillColor: myNewDataset.fillColor
    }))
})

myBarChart.datasets.push({
    bars: bars
})

myBarChart.update();

Fiddle - http://jsfiddle.net/pvak6rkx/ (inserts the new dataset after 3 seconds)

answered Jun 27, 2015 at 5:12

potatopeelings

41.2k8 gold badges97 silver badges121 bronze badges

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

4 Comments

NextGen123 Over a year ago

tnx! its working. Can I remove data in a similar way?

potatopeelings Over a year ago

Yep, I just tried a myBarChart.datasets.pop(); and it worked

NextGen123 Over a year ago

Youre the best. and if I wanna remove spesific dataset?

potatopeelings Over a year ago

just use Array.splice to kick out the dataset you don't want

Felix Livni · Accepted Answer · 2017-04-26 23:54:36Z

16

In version 2.x, you can add (or remove) data to the chart directly and then call update(), e.g.

barChart.data.datasets.push({
  label: 'label2',
  backgroundColor: '#ff0000',
  data: [1,2,3]
});
barChart.update();

Here's a jsfiddle example.

answered Apr 26, 2017 at 23:54

Felix Livni

1,26415 silver badges26 bronze badges

Comments

Hmerman6006 · Accepted Answer · 2021-04-23 18:17:26Z

Your missing the data key from your chart instance i.e. barChartData.data.datasets.push(e);
No need for any methods. The js chart object data.datasets key accepts an array of objects. Therefore in your case use :

var e = {
         fillColor : "#efefef",
         strokeColor : "#efefef",
         highlightFill: "#efefef",
         highlightStroke: "#efefef",
         data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
            }
barChartData.data.datasets[] = e; // this will append additional data to your chart
barChartData.update();

Just make sure that barChartData is an instance of your js chart.

Dan Bul · Accepted Answer · 2024-02-19 08:03:15Z

0

In 3th version you need to use update with reset mode.

        chart.update('reset');

answered Feb 19, 2024 at 8:03

Dan Bul

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

How to push datasets dynamically for chart.js (bar chart)?

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related