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>-->

<div class="chart-container" #chartContainerWrapper>
    <div #loadPanelWrapper>
        <div class="chart-wrap">
            <div id="chartContainer" #chartContainer></div>
        </div>
    </div>
</div>

CSS

.chart-container {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.series {
    list-style-type: none;
}

.chart-footer {
    flex-shrink: 0;
}

.chart-wrap {
    flex-grow: 1;
    overflow: auto;
    height: 100%;
}

#chartContainer {
    width: 100%;
    height: 600px;
    margin-left: auto;
    margin-right: auto;
}

.series-container {
    display: flex;
    align-items: center
}

.series-text-box {
    flex: 1;
}

.series-text {
    flex: 1;
}

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
  title: {
    text: "",
    fontSize: 20,
    fontFamily: "arial"
  },
  axisX: {
    title: "Cycle Number",
    labelFontColor: "#767676",
    labelFontFamily: "Verdana",
    labelFontSize: 12,
    titleFontFamily: "Verdana",
    titleFontSize: 12,
    interval: 1,
    tickColor: "black",
    gridColor: "#767676",
    includeZero: false,
    gridThickness: 0,
    gridDashType: "solid"
  },
  axisY: {
    title: "Last Capacity (mAh)",
    labelFontColor: "#767676",
    labelFontFamily: "Verdana",
    labelFontSize: 12,
    titleFontFamily: "Verdana",
    titleFontSize: 12,
    tickColor: "black",
    gridColor: "#767676",
    includeZero: false,
    gridThickness: 1,
    gridDashType: "solid"
  },
  toolTip: {
    shared: true
  },
  zoomEnabled: true,
  zoomType: "xy",
  data: [
    {
      type: "line",
      axisYIndex: 0,
      axisYType: "primary",
      name: "Name Goes Here",
      showInLegend: false,
      dataPoints: [
        {
          x: 1,
          y: 0.105869104595
        },
        {
          x: 2,
          y: 0.10280658525
        }
      ],
      legendText: "Name Goes Here",
      color: "rgb(0,59,204)",
      id: "39247",
      xValueType: null,
      markerSize: 2,
      click: onClick
    },
    {
      type: "line",
      axisYIndex: 0,
      axisYType: "primary",
      name: "Name2 Goes Here",
      showInLegend: false,
      dataPoints: [
        {
          x: 1,
          y: 0.095594538431
        },
        {
          x: 2,
          y: 0.09674367293000001
        }
      ],
      legendText: "Name2 Goes Here",
      color: "rgb(163,175,204)",
      id: "39247_2",
      xValueType: null,
      markerSize: 2,
      click: onClick
    }
  ]
});
  chart.render();

  function onClick(e) {
    alert(  e.dataSeries.type + ", dataPoint { x:" + e.dataPoint.x + ", y: "+ e.dataPoint.y + " }" );
  }
    
}