chart.jschart.js2

Select All and Unselect Option for chart.js


I'm Working on Chart.js, wanted to implement Select All and Unselect All option for labels. I'm trying to find it out but couldn't get anything such.

Please do help me out if anything such feature can be implemented.


Solution

  • If you need to show/hide charts selecting/unselecting all labels here is an example:

    var barChartData = {
      labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32],
      datasets: [{
        label: 'One',
        backgroundColor: 'rgba(206, 0, 23, 1)',
        data: [0, 1, 3, 0, 2, 0, 0, 2, 0, 1, 0, 1, 1, 0, 0, 1, 0, 0, 2, 1, 0, 1, 2, 1, 1, 0, 0, 0, 2, 2, 0, 3]
      }, {
        label: 'Two',
        backgroundColor: 'rgba(206, 0, 23, 0.75)',
        data: [0, 0, 1, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1]
      }, {
        label: 'Three',
        backgroundColor: 'rgba(206, 0, 23, 0.5)',
        data: [0, 0, 1, 0, 0, 0, 0, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 1, 1, 0, 1, 2, 0, 0, 0, 1, 0, 0, 0, 0, 1]
      }]
    
    };
    var ctx = document.getElementById('canvas').getContext('2d');
    var chartInstance = new Chart(ctx, {
      type: 'bar',
      data: barChartData,
      options: {
        title: {
          display: false,
        },
        responsive: true,
        scales: {
          xAxes: [{
            stacked: true,
          }],
          yAxes: [{
            stacked: true
          }]
        }
      }
    });
    
    $("#toggle").click(function() {
    	 chartInstance.data.datasets.forEach(function(ds) {
        ds.hidden = !ds.hidden;
      });
      chartInstance.update();
    });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>
    <canvas id="canvas" height="500" width="800"></canvas>

    Jsfiddle: https://jsfiddle.net/beaver71/00q06vjp/

    Credits: see https://github.com/chartjs/Chart.js/issues/3009


    Update: for pie chart use "meta", see: https://jsfiddle.net/beaver71/u0y0919b/