Synchronized Highcharts Does Not Work When Charts Have Different Width

In HighCharts, I tried with Synchronized multi charts as explained in the Fiddle. It works well if provided all charts have equal width. $('#container').bind('mousemove touchmove t

Solution 1:

If you have data with the same x coordinates you can catch the point from the hovered chart and then find the corresponded points in the other two charts - and call highlight().

functionhighlightPoints(e) {
  const container = this;
  const charts = Highcharts.charts.slice();
  const chartIndex = charts.findIndex(chart => chart.renderTo === container);

  if (chartIndex > -1) {
    const chart = charts.splice(chartIndex, 1)[0];

    const event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chartconst point = chart.series[0].searchPoint(event, true); // Get the hovered pointif (point) {
      const x = point.x;
      point.highlight(e);

      charts.forEach(chart => {
        const points = chart.series[0].points;
        for (let i = 0; i < points.length; i = i + 1) {
          if (points[i].x === x) {
            points[i].highlight(e);
            break;
          }
        }
      })
    }
  }
}

Bind the mousemove event

  $('.chart-0, .chart-1, .chart-2').on('mousemove', highlightPoints);

example: http://jsfiddle.net/5vcc6z40/