Search code examples
chart.jshiddenpie-chart

How to hide section in a Chart.js Pie Chart

In Chart.js you can hide a section of a chart by clicking on the label on top.
enter image description here
picture of a pie chart with hidden section

I want a section of the chart to be hidden on startup. With another type of chart I would use the dataset hidden property, but pie chart sections do not correspond with the datasets. So if you do the same the entire dataset is hidden, not just the needed section.

(Extra information: I use a pie chart with multiple datasets)

The closest I have come to a solution is this code:

for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
  meta = chart.getDatasetMeta(i);
  meta.data[index].hidden = !meta.data[index].hidden;
}

chart.update();

Or I could overwrite the generateLabels function.

Can anyone help me find a better solution?

Thank you

Solution

  • You may see an implementation as a plugin here and below.

    // A plugin that hides slices, given their indices, across all datasets.
var hideSlicesPlugin = {
  afterInit: function(chartInstance) {
    // If `hiddenSlices` has been set.
    if (chartInstance.config.data.hiddenSlices !== undefined) {
      // Iterate all datasets.
      for (var i = 0; i < chartInstance.data.datasets.length; ++i) {
        // Iterate all indices of slices to be hidden.
        chartInstance.config.data.hiddenSlices.forEach(function(index) {
          // Hide this slice for this dataset.
          chartInstance.getDatasetMeta(i).data[index].hidden = true;
        });
      }
      chartInstance.update();
    }
  }
};

Chart.pluginService.register(hideSlicesPlugin);

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [15, 1, 1, 1, 45, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }, {
      data: [5, 1, 25, 10, 5, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }],
    // Hide the second (index = 1) and the fourth (index = 3) slice.
    hiddenSlices: [1, 3]
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

    The slices to be hidden are provided using the hiddenSlices attribute, which should be an array of indices corresponding to existing slices. The slices are hidden across all datasets using the hideSlicesPlugin, if hiddenSlices has been set.