Horizontally Synchronised Highcharts Problems

Question

I'm trying to implement synchronised charts in my application using the example code from Highcharts here:

https://www.highcharts.com/demo/synchronized-charts

I have a column layout using the Materialize framework and the charts are positioned side by side in a row. After doing some playing around with the Highcharts example, it seems the charts don't behave the same horizontally as they do vertically. The labels are not synced across the charts and the crosshairs don't move in sync either.

After doing some reading I've found a similar question has been asked before:

Highcharts Sync charts horizontally

However, as someone pointed out in the comments on the "marked correct" answer, the solution doesn't work for responsive charts like mine. This person was advised to ask a separate SO question, but as I can't find it, I'm asking it.

So far this is the closest I can get to my charts properly working:

https://jsfiddle.net/6h7aL2rw/1/

However, as you can see as you move the cursor to the end of the first chart, the tooltip and crosshairs are not fully synchronised and are behind by a few points on each chart.

The code I've changed from the original example is the following:

$('#container').bind('mousemove touchmove touchstart', function (e) {
            var chart,
                point,
                i,
                event;

            for (i = 0; i < Highcharts.charts.length; i = i + 1) {
                chart = Highcharts.charts[i];
                event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart

                event.chartX = (event.chartX + 3 * $('.chart').width()) % $('.chart').width();

                point = chart.series[0].searchPoint(event, true); // Get the hovered point
                if (point) {
                    point.highlight(e);
                }
            }
        });

As was pointed out in the original question though, I don't understand the significance of this:

event.chartX + 3 * $('.chart').width()

But I feel that it's this bit of code that is the problem preventing the charts from being in sync.

Answer 1

That problem is caused by the gaps between the charts, please check an example without them: https://jsfiddle.net/BlackLabel/5Lgrc08z/

As a solution you can set event.chartX to e.offsetX :

$('#container').bind('mousemove touchmove touchstart', function(e) {
    var chart,
        point,
        i,
        event;

    for (i = 0; i < Highcharts.charts.length; i = i + 1) {
        chart = Highcharts.charts[i];
        event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart

        event.chartX = e.offsetX;

        point = chart.series[0].searchPoint(event, true); // Get the hovered point
        if (point) {
            point.highlight(e);
        }
    }
});

---

Live demo: https://jsfiddle.net/BlackLabel/ts7w4kxu/