Hide / Unhide all dataSeries from Button - CanvasJS JavaScript Charts

Hide / Unhide all dataSeries from Button - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  zoomEnabled: true,
  title:{
    text: "Car Parts Sold in Different States"
  },
  subtitles: [{
    text: "Click Legend to Hide or Unhide Data Series"
  }], 
  axisX: {
    title: "States"
  },
  axisY: {
    title: "Oil Filter - Units",
    titleFontColor: "#4F81BC",
    lineColor: "#4F81BC",
    labelFontColor: "#4F81BC",
    tickColor: "#4F81BC"
  },
  toolTip: {
    shared: true
  },
  data: [{
    type: "line",
    name: "Oil Filter",     
    yValueFormatString: "#,##0.# Units",
    dataPoints: [
      { label: "New Jersey",  y: 19034.5 },
      { label: "Texas", y: 20015 },
      { label: "Oregon", y: 25342 },
      { label: "Montana",  y: 20088 },
      { label: "Massachusetts",  y: 28234 },
      { label: "Massachusetts1",  y: 12234 },
      { label: "Massachusetts2",  y: 18234 },
      { label: "Massachusetts3",  y: 20234 },
      { label: "Massachusetts1",  y: 10234 },
      { label: "Massachusetts2",  y: 10234 },
      { label: "Massachusetts3",  y: 10234 }
    ]
  },{
    type: "line",
    name: "Clutch",
    yValueFormatString: "#,##0.# Units",
    dataPoints: [
      { label: "New Jersey", y: 210.5 },
      { label: "Texas", y: 135 },
      { label: "Oregon", y: 425 },
      { label: "Montana", y: 130 },
      { label: "Massachusetts", y: 528 },
      { label: "Massachusetts1",  y: 10234 },
      { label: "Massachusetts2",  y: 11234 },
      { label: "Massachusetts3",  y: 10234 },
      { label: "Massachusetts1",  y: 11234 },
      { label: "Massachusetts2",  y: 11234 },
      { label: "Massachusetts3",  y: 11234 }
    ]
  }]
});
chart.render();