JSFiddle - React, Tailwind, and code Playground

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>

CSS

.legends {
  display: inline;
  float: left; 
  padding: 10px; 
  cursor: pointer;
  }
  
.legendContainer {
  display: table;
  margin-right: auto;
  margin-left: auto;
  }

JavaScript

var chart = new CanvasJS.Chart("chartContainer",{    
  title: {
    text: "Click on Legends to Hide/Unhide the Group of Series"
  },
  legend: {
    cursor:"pointer",
    itemclick: function(e) {
      onLegendClick(e);
      e.chart.render();
    }
  },
  data: [
    {
      type: "line",
      color: "red",
      showInLegend: true,
      name: "Group-1",
      group: 1,
      dataPoints: [
        { x: 10, y: 171 },
        { x: 20, y: 155},
        { x: 30, y: 150 },
        { x: 40, y: 165 },
        { x: 50, y: 195 },        
      ]
    },
    {
      type: "line",
      color: "red",
      group: 1,
      dataPoints: [
        { x: 10, y: 151 },
        { x: 20, y: 135},
        { x: 30, y: 120 },
        { x: 40, y: 145 },
        { x: 50, y: 175 },        
      ]
    },
    {
      type: "line",
      color: "red",
      group: 1,
      dataPoints: [
        { x: 10, y: 121 },
        { x: 20, y: 135},
        { x: 30, y: 140 },
        { x: 40, y: 145 },
        { x: 50, y: 155 },        
      ]      },
    {
      type: "line",
      color: "blue",
      showInLegend: true,
      name: "Group-2",
      group: 2,
      dataPoints: [
        { x: 10, y: 31 },
        { x: 20, y: 25},
        { x: 30, y: 30 },
        { x: 40, y: 45 },
        { x: 50, y: 65 },        
      ]
    },
    {
      type: "line",
      color: "blue",
      group: 2,
      dataPoints: [
        { x: 10, y: 61 },
        { x: 20, y: 45},
        { x: 30, y: 50 },
        { x: 40, y: 35 },
        { x: 50, y: 55 },        
      ]
    }
  ]
});

chart.render();

function onLegendClick(e) {
  var groupSelected = e.dataSeries.group;

  for(var i = 0; i < e.chart.data.length; i++) {
    if(e.chart.options.data[i].group === groupSelected) {
      if (typeof (e.chart.options.data[i].visible) === "undefined" || e.chart.options.data[i].visible) {
        e.chart.options.data[i].visible = false;
      } else {
        e.chart.options.data[i].visible = true;
      }
    }
  }
}