Getting the corresponding x-axis value from the max value in y-axis in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Getting the corresponding x-axis value from the max value in y-axis in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//  w  w  w  . j  a va2s .com
    $('#container').highcharts({
        series: [{
            data: [5, 10, 10]
        }, {
            data: [11, 6, 15]
        }]
    });
    $("#click").click(function () {
        var chart = $("#container").highcharts(),
            sLen = chart.series.length,
            max = chart.yAxis[0].dataMax,
            series,
            index,
            i = 0;
        for(; i < sLen; i++) {
            s = chart.series[i];
            index = s.yData.indexOf(max);
            if (index >= 0) {
                series = s;
                break;
            }
        };
        $("#report").html("x: " + s.xData[index] + ", y: " + s.yData[index] );
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <button id="click">get extremes: </button> 
      <span id="report"></span> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials