JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.custom-legend-tooltip {
  position: absolute;
  top: 0px;
  left: 0px;
  background: #000;
  border-radius: 4px;
  padding: 2px;
  color: #fff;
}

.hide {
  display: none;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Basic Column Chart"
  },
  legend: {
    cursor:"pointer",
    fontSize: 15,
    itemmouseover: function(e){
      showLegendToolTip(e.x, e.y, e.dataSeries.legendLongText);
    },
    itemmouseout: function(e) {
      hideLegendToolTip();
    }
  },
  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,...