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="chartContainer2" style="height: 360px; width: 100%;"></div>

JavaScript

var chart2 = new CanvasJS.Chart("chartContainer2", {
  animationEnabled: true,
  exportEnabled: true,
  interactivityEnabled: true,


  axisX:{

    title: "Time",
    crosshair: {
      enabled: true,
      snapToDataPoint: true
    }
  },

  axisY: {
    title: "OI",
    includeZero: false,
    crosshair: {
      enabled: true,
      snapToDataPoint: true}


  },
  data: [{
    type: "line",
    axisYType: "secondary",
    name: "Net Call OI",
    toolTipContent: "{y} Net Change in Call OI",
    dataPoints: [
      { label: 10, y: 71 },
      { label: 20, y: 55 },
      { label: 30, y: 50 },
      { label: 40, y: 65 },
      { label: 50, y: 95 },
      { label: 60, y: 68 },
      { label: 70, y: 28 },
      { label: 80, y: 34 },
      { label: 90, y: 14 }
    ]
  }					
        ]
});

chart2.render();

var datapoints4length = chart2.options.data[0].dataPoints.length;
for (var i = 1; i < datapoints4length; i++) {
  if(chart2.options.data[0].dataPoints[i].y > chart2.options.data[0].dataPoints[i-1].y) 
    if(chart2.options.data[0].dataPoints[i-1].y < 30)
      if(chart2.options.data[0].dataPoints[i].y >= 30) {						
        chart2.options.data[0].dataPoints[i].markerColor = "red";
        chart2.options.data[0].dataPoints[i].markerType = "triangle";
        chart2.options.data[0].dataPoints[i].markerSize = 10;
      }
}
chart2.render();