Entire legend toggle with a button- CanvasJS

Entire legend toggle when a button is pressed

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<button id="button" type = "button" >Toggle</button>

CSS

#button{       
    z-index: 100;
    margin-left:5px;
    }

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
      title:{
      	text:"Enable/Disable the entire legend"
      },
      data: [
      {
        //showInLegend: true,
        dataPoints: [
        { x: 10, y: 71},
        { x: 20, y: 55},
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14}
        ]
      },

      {
        //showInLegend: false,
        dataPoints: [
        { x: 10, y: 34},
        { x: 20, y: 45},
        { x: 30, y: 19 },
        { x: 40, y: 75 },
        { x: 50, y: 15 },
        { x: 60, y: 60 },
        { x: 70, y: 48 },
        { x: 80, y: 04 },
        { x: 90, y: 35}
        ]
      },
      {
        //showInLegend: true,
        dataPoints: [
        { x: 10, y: 23},
        { x: 20, y: 16},
        { x: 30, y: 14 },
        { x: 40, y: 45 },
        { x: 50, y: 7 },
        { x: 60, y: 15 },
        { x: 70, y: 24 },
        { x: 80, y: 32 },
        { x: 90, y: 40}
        ]
      }

      ]
    });

 chart.render();
 
 
 
 //For toggling all Legend visiblity simultaniously
 //In first click it will Appear for all dataSeries Then it will disable all
var button = document.getElementById( "button" );
button.addEventListener( "click",  toggleLegend);


function toggleLegend(){

 	chart.options.enable = !chart.options.enable;
  setLegendState(chart, chart.options.enable);
}
 


//For seting
function setLegendState(chart, enable){
    var data = chart.options.data;
    
    for(var i = 0; i < data.length; i++)
      data[i].showInLegend = enable;
    chart.render();
 }