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>
<div id="legends">
    <ul id="legendList">      
    </ul>
</div>

CSS

li { 
  list-style-type: "-";
  cursor: pointer;
  width: auto;
  float: left;
  margin-left: 25px;
  min-width: 100px;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  data: [  {
    "type": "stackedColumn",
    "showInLegend": true,
    "markerType": "circle",
    "color": "#1A06C0",
    "lineColor": "#1A06C0",
    "highlightEnabled": false,
    "dataPoints": [
      {
        "y": 1,
        "highlightEnabled": true,
        "cursor": "pointer",

        "uniqueKey": "Surgery Name, Surgery Name,Surgery Name ,Surgery Name,Surgery Name, Surgery Name, Surgery Name, Surgery Name",
        "i": 0,
        "x": 0,

        "maxYAxisValue": 1,
        "indexLabel": "{maxYAxisValue}",
        "indexLabelPlacement": "outside",
        "indexLabelOrientation": "horizontal",
        "indexLabelFontSize": 16,
        "indexLabelFontWeight": "bold"
      }
    ],
    "axisYType": "primary",
    "legendText": "Surgery Name, Surgery Name,Surgery Name ,Surgery Name,Surgery Name, Surgery Name, Surgery Name, Surgery Name",
  },{
    "type": "stackedColumn",
    "showInLegend": true,
    "markerType": "circle",

    "lineColor": "#1A06C0",
    "highlightEnabled": false,
    "dataPoints": [
      {
        "y": 1,
        "highlightEnabled": true,
        "cursor": "pointer",

        "uniqueKey": "Surgery Name1, Surgery Name1,Surgery Name1 ,Surgery Name1,Surgery Name1, Surgery Name1, Surgery Name1, Surgery Name1",
        "i": 0,
        "x": 0,

        "maxYAxisValue": 1,
        "indexLabel": "{maxYAxisValue}",
        "indexLabelPlacement": "outside",
        "indexLabelOrientation": "horizontal",
        "indexLabelFontSize": 16,
        "indexLabelFontWeight": "bold"
      }
    ],
    "axisYType": "secondary",
    "legendText": "Surgery Name1, Surgery Name1,Surgery Name1 ,Surgery Name1,Surgery Name1, Surgery Name1, Surgery Name1, Surgery Name1",
  }]
});

//Add custom-legends as list and attach click event to that
var legendListId = document.getElementById("legendList");
customLegends(chart,legendListId);
chart.render();

function...