Add Striplines at Minimum and Maximum dataPoint within viewport range on Button Click - CanvasJS JavaScript Charts

Add Striplines at Minimum and Maximum dataPoint within viewport range on Button Click - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div>
  <button id="getMinMaxdataPoints">Add Striplines</button>
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{ 
  zoomEnabled: "true",
	data: [{
		type: "line",
		dataPoints: [
			{ x: 10, y: 71 },
			{ x: 20, y: 55 },
			{ x: 30, y: 50 },
			{ x: 40, y: 65 },
			{ x: 50, y: 95 },
			{ x: 60, y: 68 },
			{ x: 70, y: 40 },
			{ x: 80, y: 34 },
			{ x: 90, y: 40 },
      { x: 100, y: 60 },
      { x: 110, y: 40 },
			{ x: 120, y: 30 },
			{ x: 130, y: 20 },
			{ x: 140, y: 43 },
			{ x: 150, y: 63 },
			{ x: 160, y: 80 },
			{ x: 170, y: 98 },
			{ x: 180, y: 60 },
			{ x: 190, y: 50 }
		]
	}]
});

chart.render();

document.getElementById("getMinMaxdataPoints").addEventListener("click",function(){
  var maxY = -Infinity;
  var minY = Infinity;
  var viewportMinimum = chart.axisX[0].get("viewportMinimum");
  var viewportMaximum = chart.axisX[0].get("viewportMaximum");
  for(var i = 0; i < chart.data[0].dataPoints.length; i++){

    if(chart.data[0].dataPoints[i].x >= viewportMinimum && chart.data[0].dataPoints[i].x <= viewportMaximum && chart.data[0].dataPoints[i].y > maxY){
      maxY = chart.data[0].dataPoints[i].y;
    }
    if(chart.data[0].dataPoints[i].x >= viewportMinimum && chart.data[0].dataPoints[i].x <= viewportMaximum && chart.data[0].dataPoints[i].y < minY){
      minY = chart.data[0].dataPoints[i].y;
    }
  }  
  chart.axisY[0].addTo("stripLines", { value: minY, label: minY, thickness:2 }, false);
  chart.axisY[0].addTo("stripLines", { value: maxY, label: maxY, thickness:2 });
});