Chartjs-Show/hide All nested data in ChartJS Pie chart when outer is shown/hidden

by

1👍

✅

I believe, there’s no easy and standard solution for this situation.

You need to define a legend.onClick function togehter with a legend.labels.generateLabels function in order to achieve the desired behavior.

For further details, see the Legend chapter of the Chart.js documentation.

Please take a look at your amended and runnable code and see how it could be done.

var count = [541, 147, 8];
var countNested = [300, 241, 100, 47, 8];

new Chart('chartJSContainer', {
  type: 'doughnut',
  data: {
    labels: ["GROUP1", "GROUP2", "GROUP3"],
    datasets: [{
        data: count,
        backgroundColor: ["Red", "Green", "Blue"]
      },
      {
        data: countNested,
        backgroundColor: ["Red", "Red", "Green", "Green", "Blue"]
      }
    ]
  },
  options: {
    responsive: false,
    plugins: {
      legend: {
        labels: {
          generateLabels: chart => chart.data.labels.map((l, i) => ({            
            text: l,
            index: i,
            fillStyle: chart.data.datasets[0].backgroundColor[i],
            strokeStyle: chart.data.datasets[0].backgroundColor[i],
            hidden: chart.getDatasetMeta(0).data[i].hidden
          })),
        },
        onClick: (event, legendItem, legend) => {
          let chart = legend.chart;
          let hidden = !chart.getDatasetMeta(0).data[legendItem.index].hidden;
          chart.getDatasetMeta(0).data[legendItem.index].hidden = hidden;
          let pointer = 0;
          chart.data.datasets[0].data.forEach((v, i) => {
            while (v > 0) {
              if (i == legendItem.index) {
                chart.getDatasetMeta(1).data[pointer].hidden = hidden;
              }
              v -= countNested[pointer++];
            }
          });
          chart.update();
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.js"></script>
<canvas id="chartJSContainer" width="300"></canvas>

Leave a comment