Question

I’m writing a click event on a HighCharts setup that has 2 different series, one on top of the other. I want the event to always display a message on the top series, even if they click the bottom series.

I’m using code such as:

chart = new Highcharts.StockChart({
  chart: {
    renderTo: 'container',
    events: {
      click: function(event) {
        // perform actions

        this.chart.series[1].setData([{
          x: event.point.x,
          y: ??
        }]);
      }

...

What I want to do is use the Y value from the 1st series based on the X value of where they clicked on the chart. How can I look up the Y value based on this information?

Basically, if I click on a point on the chart, how can I look up a point in a series on the chart based on it’s X value only.

Answer 1

the series object has a points object array, which basically contains all the points in that series, once you get hold of the xValue for a given series from the event object, you can iterate through the points to find the closest x and return its corresponding y value

Code Snippet:

function getYValue(chartObj,seriesIndex,xValue){
 var yValue=null;
 var points=chartObj.series[seriesIndex].points;
 for(var i=0;i<points.length;i++){
    if(points[i].x>=xValue)break;
    yValue=points[i].y;
 }
 return yValue;    
}

Usage:

 click:function(evt){
      var seriesIndex=1;
      var xAxisIndex=0;
      // All you need is the index of the series that you want
      // And the index of the xAxis bound to that series
      // default to 0 if you have only one series
      alert(getYValue(this,seriesIndex,evt.xAxis[xAxisIndex].value));
 }

fiddle @ http://jsfiddle.net/jugal/3MVGF/