Chart.js: Hidden one of the labels by default

[mangolee]

Assume I have 5 labels in the legend, when I click one of them, Label will be rendered with a strike-through effect, and the graph will hide this dataset. How can I hide one of the labels by default? (With no user clicks)

[etimberg]

@mangolee add hidden: true to the dataset you want hidden.

[mangolee]

However, I need to draw a pie chart. The pie chart has only one dataset,

For example,

var throughput_data = {
labels: ["a",
"b",
"c",
"d",
"e",
"Others"],
datasets: [{
data: [375, 504, 420, 452,842,9610],
backgroundColor: [
"#6200EA",
"#FF5252",
"#FF9800",
"#2962FF",
"#64DD17",
"#BDBDBD"
],
hoverBackgroundColor: [
"#6200EA",
"#FF5252",
"#FF9800",
"#2962FF",
"#64DD17",
"#BDBDBD"
]
}]
};

How can I add the hidden option if I want to hide the "Others" one ?

[etimberg]

For a pie chart that's not possible. The label hide function sets the data to NaN which hides it

[mikedeltalima]

@mangolee, this should be supported, but until it is I was able to set the meta to hidden by overriding the default label generator (for polarArea, but this should work for pie charts with some modification).

import {Chart} from 'chart.js';

const defaultGenerateLabels = Chart.defaults.polarArea.legend.labels.generateLabels;
const newGenerateLabels = function (chart) {
    if (newGenerateLabels['firstCall']) {
        const meta = chart.getDatasetMeta(0);
        meta.data[0].hidden = true; // Choose meta.data[i] where i is index of your data
        newGenerateLabels['firstCall'] = false;
    }
    return defaultGenerateLabels(chart);
}
newGenerateLabels['firstCall'] = true;

Then, in the options for your chart, set:

const options = {
    legend: {
        labels: {
            generateLabels: newGenerateLabels
        }
    }
}