CODEWITHSUNDEEP
javascriptcsshighcharts
Вячеслав Ве
Вячеслав Ве

Reputation: 61

Highcharts Synchronized charts

Any way to get Highlight a point by showing tooltip, setting hover state and draw crosshair by coordinate xData with chart layout in row, not in column?

http://jsfiddle.net/HappyFX/wt91mbvf/

Solution from https://stackoverflow.com/a/37565667/4262914 based on static chart width:

 event.chartX = (event.chartX+600) % 200;

not good when:

.chart{
    position: absolute;
    height: 50%;
    width: 50%;
    margin: 0 auto;
}

Upvotes: 1

Views: 1973

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

The problem is that searchPoint searches for the closest point to the cursor. And actually it's done: the first point on the second chart is highlighted.

You can modify this a bit:

  • set event on .chart, not on #container
  • find hovered chart and retrieve the closest point
  • use that point position as a fake event when searching corresponding points

And demo: http://jsfiddle.net/v2t171og/

Upvotes: 2

Related Questions