JSFiddle - React, Tailwind, and code Playground

by kevalpanchal

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>

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",
  }]
});

chart.render();