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

Answer 1

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>