JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="tools">
  <input type="button" onClick="showAll();" value="Show All">
  <input type="button" onClick="hideAll();" value="Hide All">
</div>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

toggleDataSeries = function(e) {
  if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    e.dataSeries.visible = false;
  } else {
    e.dataSeries.visible = true;
  }
  chart.render();
}

showAll = function() {
  chart.options.data.forEach(element => {
    element.visible = true;
  });
  chart.render();
}

hideAll = function() {
  chart.options.data.forEach(element => {
    element.visible = false;
  });
  chart.render();
}

var chart = new CanvasJS.Chart("chartContainer", {
  legend: {
    horizontalAlign: "left", // "center" , "right"
    verticalAlign: "bottom", // "top" , "bottom"
    cursor: "pointer",
    fontSize: 16,
    itemclick: toggleDataSeries
  },
  data: [{
      name: "My Data Series 1",
      type: "column",
      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
        }
      ]
    },
    {
      name: "My Data Series 2",
      type: "column",
      showInLegend: true,
      dataPoints: [{
          x: 10,
          y: 171
        },
        {
          x: 20,
          y: 155
        },
        {
          x: 30,
          y: 150
        },
        {
          x: 40,
          y: 165
        },
        {
          x: 50,
          y: 195
        },
        {
          x: 60,
          y: 168
        },
        {
          x: 70,
          y: 128
        },
        {
          x: 80,
          y: 134
        },
        {
          x: 90,
          y: 114
        }
      ]
    }
  ]
});

chart.render();
for(var i = 0; i < chart.data.length; i++)...