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

[LukePrior]

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: https://jsfiddle.net/yp4o16nd/

• Note I have also posted this question on StackOverflow

[LeeLenaleee]

You would need to write a custom onClick function that implements logic to hide all the data you want

https://www.chartjs.org/docs/master/configuration/legend.html#custom-on-click-actions

[Udemology]

Hi LukePrior,

Based on LeeLenalee I tried to create something and mostlikely you want to convert the legend into a style similar to bar chart where the dataset would show/hide if clicked on.

In case you need to understand what has been done watch this here: https://youtu.be/_M8ijxCE7mY

The code below shows you the config block. Just add it in your code and it will work nicely. Hope this helps.

    // config 
    const config = {
      type: 'doughnut',
      data,
      options: {
        cutout: '80%',
        plugins: {
          legend: {
            onClick: (evt, legendItem, legend) => {
              const datasets = legend.legendItems.map((dataset, index) => {
                return dataset.text;
              })
              const index = datasets.indexOf(legendItem.text);
              if(legend.chart.isDatasetVisible(index) === true) {
                legend.chart.hide(index)
              } else {
                legend.chart.show(index)
              }
            },
            labels: {
              generateLabels: (chart) => {
                let visibility = [];
                for (let i = 0; i < chart.data.datasets.length; i++) {
                  if(chart.isDatasetVisible(i) === false) {
                    visibility.push(true) 
                  } else {
                    visibility.push(false) 
                  }
                } 
                console.log(chart)
                return chart.data.datasets.map((dataset, index) => ({
                  text: dataset.label,
                  fillStyle: dataset.backgroundColor,
                  strokeStyle: dataset.borderColor,
                  hidden: visibility[index]
                  })
                )
              }
            }
          }
        }
      }
    };

[LukePrior]

This was what I ultimately ended up with: https://jsfiddle.net/hktjxncw/4/