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

I am attempting to create a nested pie/doughnut chart in ChartJS 3 and am having issues with correctly displaying the data when one of the outer segments are hidden using the legend.

The second inner ring of data is just the outer ring split into more specific segments:

Outer: [541, 147, 8]
Inner: [300, 241, 100, 47, 8]

When the user hides GROUP1 the correct outer segment is hidden but only the first inner segment is hidden instead of the first and second (300 + 241 = 541). So I'm wondering how I can correctly group the two datasets so that all nested data is hidden.

I have attached a sample below demonstrating the issue.

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

var data = {
  labels: ["GROUP1", "GROUP2", "GROUP3"],
  datasets: [{
      data: count,
      backgroundColor: ["Red", "Green", "Blue"]
    },
    {
      data: countNested,
      backgroundColor: ["Red", "Red", "Green", "Green", "Blue"]
    }
  ]
}

const options = {
  type: 'doughnut',
  data: data,
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="400" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

Solution 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>

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

Solution 1:

Related

Recent Posts