JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 360px; width: 100%;">
</div>
<button id="toggleLegends">Toggle Legends</button>


<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/multi-series-charts/" target="_blank" title="Displaying Multi Series Data in Charts ">https://canvasjs.com/docs/charts/basics-of-creating-html5-chart/multi-series-charts/</a></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Multi-Series Line Chart"  
  },
  legend: {
  	itemmousemove: function(e) {
    	e.chart.container.title = e.dataSeries.fullLegendText;
    },
		itemmouseout: function(e) {
			e.chart.container.title = "";
		}
  },
  data: [
    {        
      type: "line",
      legendText: "Series 1",
      fullLegendText: "DataSeries 1",
      dataPoints: [
        { x: 10, y: 21 },
        { x: 20, y: 25 },
        { x: 30, y: 20 },
        { x: 40, y: 25 },
        { x: 50, y: 27 },
        { x: 60, y: 28 },
        { x: 70, y: 28 },
        { x: 80, y: 24 },
        { x: 90, y: 26 }

      ]
    },{        
      type: "line",
      legendText: "Series 2",
      fullLegendText: "DataSeries 2",
      dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 35 },
        { x: 30, y: 30 },
        { x: 40, y: 35 },
        { x: 50, y: 35 },
        { x: 60, y: 38 },
        { x: 70, y: 38 },
        { x: 80, y: 34 },
        { x: 90, y: 44 }

      ]
    },{        
      type: "line",
      legendText: "Series 3",
      fullLegendText: "DataSeries 3",
      dataPoints: [
        { x: 10, y: 45 },
        { x: 20, y: 50 },
        { x: 30, y: 40 },
        { x: 40, y: 45 },
        { x: 50, y: 45 },
        { x: 60, y: 48 },
        { x: 70, y: 43 },
        { x: 80, y: 41 },
        { x: 90, y: 28 }

      ]
    },{        
      type: "line",
      legendText: "Series 4",
      fullLegendText: "DataSeries 4",
      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 }      
      ]
    }
  ]
});

chart.render();

$("#toggleLegends").click(function() {
		for(var i = 0; i < chart.data.length; i++) {
    	chart.data[i].set("showInLegend", !chart.data[i].showInLegend);
    }
});