How can I hide legend text if it's zero?

Question

I'm trying to hide the legend title of an item, if it's value is zero. There are similar problems existing here, but nothing led to solving my problem.

Below is my source code:

<script>
      var ctx = document.getElementById('beratungsfelderChart');
      var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
            datasets: [{
                label: '# of Votes',
                data: [0, 3, 3, 5, 2],
                backgroundColor: [
                    '#172b4dD9',
                    '#2dce89D9',
                    '#231F20D9',
                    '#192d35D9',
                    '#3B6058D9'
                ]
            }]
        },
        options: {
          legend: {
            labels: {
              //filter: function(item, chart, context) {
              //  return !item.text.includes('Test');
              //}
              filter: function(item, context) {
                return !context.dataset.data[context.dataIndex] == 0;
              } 
            }
          },
          axis: {
            scales: {
                yAxes: [{
                    display: false
                }],
                xAes: [{
                  ticks: {
                    display: false
                  }
                }]
            }
          },
          plugins: {
            datalabels: {
              display: function(context) {
                return context.dataset.data[context.dataIndex] > 1;
              }
            }
          }
        }
    });

    </script>

As you can see I tried a few potential solutions, but until now, nothing worked out unfortunately.
1. options -> legend -> labels
2. options -> plugins -> datalabels

I hope that someone can help me somehow.

Best, Nader

score 4 · Accepted Answer · answered Feb 27 '20 at 19:22

4

You should use legend.labels.filter as follows.

legend: {
  labels: {
    filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0
  }
}

new Chart(document.getElementById('beratungsfelderChart'), {
  type: 'doughnut',
  data: {
    labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
    datasets: [{
      label: '# of Votes',
      data: [0, 3, 3, 5, 2],
      backgroundColor: [
        '#172b4dD9',
        '#2dce89D9',
        '#231F20D9',
        '#192d35D9',
        '#3B6058D9'
      ]
    }]
  },
  options: {
    legend: {
      labels: {
        filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0
      }
    },
    axis: {
      scales: {
        yAxes: [{
          display: false
        }],
        xAes: [{
          ticks: {
            display: false
          }
        }]
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="beratungsfelderChart" height="90"></canvas>

answered Feb 27 '20 at 19:22

uminder

23,831
5
37
72

It worked like a charm! Thank you so much! :) Btw.. Do you know how to deactivate cross out a legenditem, when its value is 0? :P – Trinkflasche93 Feb 28 '20 at 11:23
@Nad3rk93: You need to implement `legend.generateLabels` function, similar as explained in the answer https://stackoverflow.com/a/60000077/2358409 – uminder Feb 28 '20 at 12:07
1

The option seems to be located on [`options.plugins.legend.labels.filter`](https://www.chartjs.org/docs/3.4.1/configuration/legend.html#legend-label-configuration) now – Pierre de LESPINAY Jan 12 '22 at 14:34
@PierredeLESPINAY is right. The updated code is as follows: `options: { plugins: { legend: { labels: { filter: (legendItem, data) => data.datasets[0].data[legendItem.index] != 0 } } } }`. – Asterios Kalogeras May 16 '23 at 08:47

score 0 · Answer 2 · answered Sep 12 '22 at 10:47

You can also use generateLabels instead of filter. it's a newer method and you would be able to change value and style of each legends. For example I've removed zero values and added data to each label :

new Chart(document.getElementById('beratungsfelderChart'), {
  type: 'doughnut',
  data: {
    labels: ['Group A', 'Group B', 'Group C', 'Group D', 'Group E'],
    datasets: [{
      label: '# of Votes',
      data: [0, 3, 3, 5, 2],
      backgroundColor: [
        '#192d35',
        '#36A2EB',
        '#FFCE56',
        '#FF6384',
        '#3B6058'
      ]
    }]
  },
  options: {
    legend: {
      labels: {
          generateLabels: function (chart) {
                var newLegends = [];
                chart.data.labels.forEach(function (label, index) {
                    if (chart.data.datasets[0].data[index] == 0) //zero values
                        return;
                    var legend = {
                        text: label + ' ('+chart.data.datasets[0].data[index]+')',
                        fillStyle: chart.data.datasets[0].backgroundColor[index]
                    };
                    newLegends.push(legend)
                });

                return newLegends;
            }
      }
    },
    axis: {
      scales: {
        yAxes: [{
          display: false
        }],
        xAes: [{
          ticks: {
            display: false
          }
        }]
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="beratungsfelderChart" height="90"></canvas>

How can I hide legend text if it's zero?

2 Answers2