[Chartjs]-Chartjs : Remove specific labels

by

2👍

✅

You can add custom logic to legend options like:

options: {
   legend: {
      display: true,
          labels: {
              generateLabels: function (chart) { ...

You can reach the labels here, customize their color, text, you can group them etc. So in this case you have to group the labels by their text first like

const labelTexts = []
const newLabels = []
labels = Chart.defaults.global.legend.labels.generateLabels(chart);
// group labels
labels.map((label) => {
    if (labelTexts.indexOf(label.text) === -1) {
        labelTexts.push(label.text)
    }
})
labelTexts.map((text) => {
    labels.map((label) => {
        if (label.text === text) {
            newLabels.push(label)
        }
    })
})

Then you can remove the redundant labels like:

for (var i = 0; i < newLabels.length - 2; i++) {
    if (newLabels[i].text !== newLabels[i + 1].text) {
        newLabels2.push(newLabels[i])
    }
}

Check a working example here

Leave a comment