Chartjs-Synchronizing zoom between multiple charts

$.getJSON('//www.highcharts.com/samples/data/aapl-c.json', function(data) {
  // Create the chart
  var chart1 = Highcharts.stockChart({
    chart: {
      renderTo: 'container1',
      defaultSeriesType: 'line',
      zoomType: 'x'
    },
    
    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'AAPL Stock Price'
    },
    xAxis: {
      type: 'datetime',

      events: {
        afterSetExtremes: function(event) {
          chart2.xAxis[0].setExtremes(event.min, event.max);
        }
      }
    },

    series: [{
      name: 'AAPL',
      data: data,
      tooltip: {
        valueDecimals: 2
      }
    }]
  });

  var chart2 = Highcharts.stockChart({
    chart: {
      renderTo: 'container2',
      defaultSeriesType: 'line',
      zoomType: 'x'
    },
    
    rangeSelector: {
      selected: 1
    },

    title: {
      text: 'AAPL Stock Price'
    },
    xAxis: {
      type: 'datetime',

      events: {
        afterSetExtremes: function(event) {
          chart1.xAxis[0].setExtremes(event.min, event.max);
        }
      }
    },

    series: [{
      name: 'AAPL',
      data: data,
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container1" style="height: 400px; min-width: 310px"></div>
<div id="container2" style="height: 400px; min-width: 310px"></div>