Highlighting Highest Y-Value with Marker & Indexlabel in Line Chart | CanvasJS JavaScript Charts

Highlighting Highest Y-Value with Marker & Indexlabel in Line Chart | CanvasJS JavaScript Charts

by canvasjs

HTML

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

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {  
  exportEnabled: true,
  theme: "light2", // "light1", "light2", "dark1", "dark2"
  title:{
    text: "Line Chart with Marker at Highest Y-Value"
  },
  axisY: {
    includeZero: true
  },
  data: [{
    type: "line",
    markerSize: 0,    
    dataPoints: [
      { x: 10, y: 71 },
      { x: 20, y: 55 },
      { x: 30, y: 50 },
      { x: 40, y: 65 },
      { x: 50, y: 92 },
      { x: 60, y: 68 },
      { x: 70, y: 38 },
      { x: 80, y: 71 },
      { x: 90, y: 54 },
      { x: 100, y: 60 },
      { x: 110, y: 36 },
      { x: 120, y: 49 },
      { x: 130, y: 21 }
    ]
  }]
});
highlightHighest(chart);
chart.render();

function highlightHighest(chart) {
  var highestValue = -Infinity, dataPointIndex = 0, dataSeriesIndex = 0;;
  for(var i = 0; i < chart.options.data.length; i++) {
    for(var j = 0; j < chart.options.data[i].dataPoints.length; j++) {
      if(chart.options.data[i].dataPoints[j].y > highestValue) {
        highestValue = chart.options.data[i].dataPoints[j].y;
        dataSeriesIndex = i;
        dataPointIndex = j;
      }
    }
  }
  chart.options.data[dataSeriesIndex].dataPoints[dataPointIndex].markerSize =  10;
  chart.options.data[dataSeriesIndex].dataPoints[dataPointIndex].indexLabel = "\u2605 Highest";
}