Search code examples
javascriptjqueryjsfiddlehighcharts

Highcharts zIndex issue with crosshair

I have recently (since yesterday) started using highcharts. I am using an area plot for the series. I have enabled the the cross-hair and set its zIndex larger such that it is visible above the plot area. But, another problem arose here. The marker (I used a circle here), is behind the cross-hair. I mean the sequence now is (plot->marker->cross-hair).

Now, what I want is (plot->cross-hair->marker). Is this even possible at all? If yes, what all do I have to do?

Below is a image scenario of the situation at hand. Please do correct me, if I am wrong anywhere.

enter image description here

Solution

  • All you have to do is set the crosshairs

    tooltip: {
  crosshairs: [true, true]
}

    and marker width

    plotOptions: {
  area: {
    marker: {
      enabled: false,
      symbol: 'circle',
      radius: 6,
      states: {
        hover: {
          enabled: true
        }
      }
    }
  }
}