[Chartjs]-How can I hide legend text if it's zero?

by

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>

0👍

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>

Leave a comment