JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<div class="chartWrapper">
  <div class="chartAreaWrapper">
    <div id="chartContainer" style="height: 1000px; width: 100%"></div>
  </div>
  <canvas id="overlayedAxis"></canvas>
</div>

CSS

.chartWrapper {
    position: relative;
    max-height: 350px;
}

.chartWrapper > canvas {
    position: fixed;
    left: 0;
    pointer-events:none;
}

JavaScript

window.onload = function () {
  var dataPoints1 = [], dataPoints2 = [];
  var stockChart = new CanvasJS.StockChart("chartContainer",{
    rangeSelector: {
      enabled: false,
    },
    navigator: {
      enabled: false,
    },
    charts: [
      {
        title: {
          text: ""
        },
        height: 250,
        axisY: {
          prefix: "",
          gridThickness: 0,
          tickLength: 0,
          labelFormatter: function(e) {
          	if(e.chart.axisY[0].viewportMaximum == e.value)
            	return "";
              
            return e.value;
          }
        },
        axisX: {
          lineThickness: 0,
          gridThickness: 0,
          tickLength: 0
        },
        data: [{
          type: "line",
          yValueFormatString: "$#,###.##",
          dataPoints : dataPoints1,
          axisXType: 'secondary',
        }],

      },
      {
        title: {
          text: ""
        },
        height: 250,
        axisY: {
          prefix: "",
          gridThickness: 0,
          tickLength: 0,
        },
        axisX2: {
          lineThickness: 0,
          gridThickness: 0,
          tickLength: 0,
          labelFormatter: () => ""
        },
        data: [{
          type: "line",
          yValueFormatString: "$#,###.##",
          dataPoints : dataPoints1,
          axisXType: 'secondary',
        }],

      },
      {
        title: {
          text: ""
        },
        height: 250,
        axisY: {
          prefix: "",
          gridThickness: 0,
          tickLength: 0,
        },
        axisX2: {
          lineThickness: 0,
          gridThickness: 0,
          tickLength: 0,
          labelFormatter: () => ""
        },
        data: [{
          type: "line",
          yValueFormatString: "$#,###.##",
          dataPoints : dataPoints1,
          axisXType: 'secondary',
        }],

      },
      {
        title: {
          text: ""
        },
        height: 250,
        axisY: {
          prefix:...