I want to add & delete datasets from chart.js using checkboxes.

Right now I am adding using this:

var ds1 = {
    label: ..
    data: .. etc
};
data.datasets.push(ds1);

When I uncheck any of the checkboxes, it's always deleting the last dataset added, which is not necessary the one of the checkbox.

I'm using data.datasets.pop(ds1); to remove the when a checkbox is clicked.

I want to add & delete datasets from chart.js using checkboxes.

Right now I am adding using this:

var ds1 = {
    label: ..
    data: .. etc
};
data.datasets.push(ds1);

When I uncheck any of the checkboxes, it's always deleting the last dataset added, which is not necessary the one of the checkbox.

I'm using data.datasets.pop(ds1); to remove the when a checkbox is clicked.

• javascript
• charts

4 Answers 4

If you're removing using data.datasets.pop(ds1) you'll never get the result you're looking for. The dataset property is an array, so let's just focus on arrays and ignore Chart.js.

First issue is that the pop() method of the Arrays type does not take an argument, so providing which element you want to remove is irrelevant. Pop() will always remove the last element from an array.

To remove a specific element from the array you need to use the splice() function.

Let's say that ds1 is the element you want to remove.

let removalIndex = data.datasets.indexOf(ds1); //Locate index of ds1
if(removalIndex >= 0) { //make sure this element exists in the array
    data.datasets.splice(removalIndex, 1);
}

This will delete the 1 record in the array starting at the index we located ds1.

If you look at ChartJS' internal object chart.data.datasets, the datasets are distinguishable by the label you gave when initially adding the datasets (it's weird that there's no ID):

So it's really just a matter of filtering out an object from the array by that Label, and calling chart.update();.

// Filter out and set back into chart.data.datasets
chart.data.datasets = chart.data.datasets.filter(function(obj) {
    return (obj.label != targetLabel); 
});
// Repaint
chart.update();

Actually you can add an ID in your dataset :

var ds1 = {
    label: ..
    data: ..
    id : 'myId'
};
data.datasets.push(ds1);

It will not affect your dataset or your chart in anyway

Then you can find and delete (or update) :

data.datasets.find((dataset, index) => {
    if (dataset.id === 'myId') {
       data.datasets.splice(index, 1);
       return true; // stop searching
    }
});
myChart.update();

Thank you JNYRanger!

It got like this:

...
$(document).ready(function() {
$('#ind4').change(function(){
    if (this.checked) {
        graph.data.datasets.push(ds4);  
        graph.update();
    } else {
        let removalIndex = graph.data.datasets.indexOf(ds4);
        graph.data.datasets.splice(removalIndex, 1);
        graph.update();
    }
});
});

$(document).ready(function() {
$('#ind5').change(function(){
    if (this.checked) {
        graph.data.datasets.push(ds5);  
        graph.update();
    } else {
        let removalIndex = graph.data.datasets.indexOf(ds5);
        graph.data.datasets.splice(removalIndex, 1);
        graph.update();
    }
});

I just added graph.data.... (when graph is the var of my chart) and graph.update() by the end of every action.