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>

JavaScript

var scatterDps = [];
var indexLabelWidth;
var indexLabelOffset;

var customLinesData = [
  {
    x: 20,
    y: 1000,
    label: "Control or Experimental"
  },{
    x: 22,
    y: 900,
    label: "Oligomycin"
  },{
    x: 24,
    y: 800,
    label: "FCCP"
  },{
    x: 26,
    y: 700,
    label: "Rotenone + Antimycin A"
  }
];

var chart = new CanvasJS.Chart("chartContainer", {
  axisX: {
    minimum: 5,
    maximum: 95
  },
  axisY: {
    maximum: 1000,
    gridThickness: 0,
  },
  data: [{
    type: "line",
    dataPoints: [
      { x: 10, y: 710 },
      { x: 20, y: 550 },
      { x: 30, y: 500 },
      { x: 40, y: 650 },
      { x: 50, y: 950 },
      { x: 60, y: 680 },
      { x: 70, y: 280 },
      { x: 80, y: 340 },
      { x: 90, y: 140 }
    ]
  }]
});

chart.render();
addLines(chart, customLinesData);

function addLines(chart, customLinesData) {  
  
  for(var i = 0; i < customLinesData.length; i++) {

    //Add all Line Series
    chart.addTo("data", {
      type: "line",
      color:"#b3db8f",
      markerSize: 0,
      toolTipContent: null,
      highlightEnabled: false,
      dataPoints: [
        { x: customLinesData[i].x, y: 0 },
        { x: customLinesData[i].x, y: customLinesData[i].y }
      ]
    }, null, false);

    indexLabelWidth = getWidth(customLinesData[i].label);
    indexLabelOffset = (chart.width < 700) ? 5 : 2 ; 
    
    scatterDps.push({
      x: customLinesData[i].x + chart.axisX[0].convertPixelToValue(indexLabelWidth) / 2 + indexLabelOffset,
      y: customLinesData[i].y - (chart.axisY[0].interval / 5),
      indexLabel: "\u25C0 " + customLinesData[i].label
    });
  }
  //Add Scatter Series to show Indexlabels
  chart.addTo("data", {
    type: "scatter",
    markerSize: 0,
    toolTipContent: null,
    highlightEnabled: false,
    indexLabelFontColor:"#b3db8f",
    dataPoints: scatterDps
  });
}

window.onresize = function() {
	indexLabelOffset = (chart.width < 700) ? 5 : 2 ;
  for(var i = 0; i < customLinesData.length; i++) {
 ...