Question on Stack Overflow: http://stackoverflow.com/questions/38236453/highcharts-synchronized-charts-no-longer-sync-up-once-data-are-updated

author(s): Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container1" style="height: 300px; margin-top: 1em"></div>
<div id="container2" style="height: 300px; margin-top: 1em"></div>
<div id="container3" style="height: 300px; margin-top: 1em"></div>

<button id="button" class="autocompare">Update chart data</button>

JavaScript

$(function () {


  /**
     * In order to synchronize tooltips and crosshairs, override the
     * built-in events with handlers defined on the parent element.
     */
  $('#container1').add('#container2').add('#container3').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
      point = chart.series[0].searchPoint(event, true); // Get the hovered point

      if (point) {
        point.highlight(e);
      }
    }
  });
  /**
     * Override the reset function, we don't need to hide the tooltips and crosshairs.
     */
  Highcharts.Pointer.prototype.reset = function () {
    return undefined;
  };

  /**
     * Highlight a point by showing tooltip, setting hover state and draw crosshair
     */
  Highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
  };

  /**
     * Synchronize zooming through the setExtremes event handler.
     */
  function syncExtremes(e) {
    var thisChart = this.chart;

    if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
      Highcharts.each(Highcharts.charts, function (chart) {
        if (chart !== thisChart) {
          if (chart.xAxis[0].setExtremes) { // It is null while updating
            chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
          }
        }
      });
    }
  }

  var chart1 = {
    chart: {
      renderTo: 'container1'
    },
    title: {
      text: 'Sample chart #1'
    },
    xAxis: {
      crosshair: true, events: { setExtremes: syncExtremes },
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul',...