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 chart = new CanvasJS.Chart("chartContainer", {
  title:{
    text: "Spline Chart with Peak"
  },
  subtitles: [{
  	text: "Open Browser Console for the Peak Value"
  }],
  data: [{				
    type: "spline",
    dataPoints: [
      { x:8.63, y:100.54},
      { x:13.01, y:102.44},
      { x:17.04, y:102.23},
      { x: 19.7, y:100.27}
    ]
  }]
});

chart.render();
var dpsAtPeak = findMaxPeak();
console.log(dpsAtPeak);

function findMaxPeak() { 
  var div = document.createElement('div');
  div.setAttribute("id", "hiddenContainer");
  div.setAttribute("style", "height:" + chart.height + "px; width:" + chart.width + "px;");
  document.body.appendChild(div);

  var chart1 = new CanvasJS.Chart("hiddenContainer", {
    backgroundColor: "transparent",
    interactivityEnabled: false,
    axisX: {
      lineColor: "transparent",
      gridColor: "transparent",
      tickColor: "transparent",
      labelFontColor: "transparent"
    },
    axisY: {
      lineColor: "transparent",
      gridColor: "transparent",
      tickColor: "transparent",
      labelFontColor: "transparent"
    },
    data: [{
      type: chart.data[0].type,
      color: "rgba(255,0,0,1)",
      dataPoints: chart.data[0].dataPoints
    }]
  });
  chart1.render();

  var imageData = chart1.ctx.getImageData(chart1.plotArea.x1, chart1.plotArea.y1, chart1.plotArea.width, chart1.plotArea.height).data;

  coloredRegionData = [];
  for (var i = 0; i < imageData.length; i += 4) {
    if (i % (4 * chart1.plotArea.width) === 0) {
      coloredRegionData.push([]);
      temp = i;
    }
    if (imageData[i] === 255 && imageData[i+1] === 0) {
      coloredRegionData[coloredRegionData.length - 1].push((i - temp) / 4);
    }
  } 

  splinePixelCordinates = [];
  for (var i = 0; i < coloredRegionData.length; i++) {
    for (j = 0; j < coloredRegionData[i].length; j++) {
      splinePixelCordinates.push({
        x: chart1.plotArea.x1 + coloredRegionData[i][j],
        y: chart1.plotArea.y1 + i
      })
    }
  }

 ...