Highcharts Synchronized charts

Question

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;
}

Answer 1

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/