Hide all in chartjs - Javascript Chart.js

Description

Hide all in chartjs
Demo Code

<html>
   <head> 
      <title> chart.js pie show/hide all</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> 
      <style id="compiled-css" type="text/css">

html, body {
   height: 100%;
   width: 100%;
}
#myChart {//  ww  w .ja v a2  s  . c o m
   width: 100%;
   height: 100%;
}
      </style> 
      <script type="text/javascript">
    window.onload=function(){
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: 'pie',
  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();
});
    }

      </script> 
   </head> 
   <body> 
      <button id="toggle">show/hide all</button> 
      <br> 
      <canvas id="myChart"></canvas>  
   </body>
</html>
Hide all in chartjs - Javascript Chart.js

Description

Demo Code

Related Tutorials
