chart.js pie show/hide all

by sazakharov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<button id="toggle">show/hide all</button>
<br>
<canvas id="myChart"></canvas>

CSS

html, body {
  height: 100%;
  width: 100%;
}
#myChart {
/*  width: 100%;
  height: 100%;*/
}

JavaScript

var data = {
    datasets: [{
      data: [
        10,
        5,
        30,
        2,
        1,
      ],
      backgroundColor: [
		'#4dc9f6',
		'#f67019',
		'#f53794',
		'#537bc4',
		'#acc236',
      ]
    }],
    labels: [
      "one",
      "two",
      "three",
      "four",
      "five"
    ]
};

var options = {
  responsive: true,
  legend: {
    position: 'top',
  }
};
var config = {
  type: 'doughnut',
  data: data,
  options: options
};

var ctx = document.getElementById("myChart")
									.getContext("2d");
var chartInstance = new Chart(ctx, config);

$("#toggle").click(function() {
	 var meta = chartInstance.getDatasetMeta(0);
	 meta.data.forEach(function(ds) {
    ds.hidden = !ds.hidden;
  });
  chartInstance.update();
});