javascript - How can I hide legend text if it's zero? - Stack Overflow

admin管理员组

文章数量:1426088

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

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

• javascript
• html
• chart.js

Share Improve this question Follow edited Feb 27, 2020 at 19:10 isherwood 61.2k1616 gold badges122122 silver badges170170 bronze badges asked Feb 27, 2020 at 18:58 Trinkflasche93Trinkflasche93 8911 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

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./ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="beratungsfelderChart" height="90"></canvas>

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./ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="beratungsfelderChart" height="90"></canvas>

本文标签： javascriptHow can I hide legend text if it39s zeroStack Overflow