title: Highchart multiple axes - sync axes on multiple charts
body: <p>I've two Highcharts with multiple axes. The two set of axes represents the same units and the two charts are horizontal aligned. I've created a JSFiddle to illustrate my setup based on a <a href="http://www.highcharts.com/demo/combo-multi-axes" rel="nofollow noreferrer">Highchart sample</a>:</p>
  
  <p><a href="http://jsfiddle.net/dennismadsen/gbbzz2jh/" rel="nofollow noreferrer">http://jsfiddle.net/dennismadsen/gbbzz2jh/</a></p>
  
  <p><a href="https://i.stack.imgur.com/Ofajx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ofajx.jpg" alt="Highchart multi axes sample"></a></p>
  
  <p>In this example you can zoom on the y axis on the chart to the left. Please note that the axes on the right chart are synchronized. That's done using this <code>afterSetExtremes</code> event:</p>
  
  <pre><code>function syncYAxis(e) {
      var thisAxis = this;
      var thisChart = e.currentTarget.chart;
  
      Highcharts.each(Highcharts.charts, function (chart) {
          if (chart &amp;&amp; chart !== thisChart) {
              var currentAxis = chart.get(thisAxis.options.id);
              currentAxis.setExtremes(e.min, e.max);
          }
      });
  }
  </code></pre>
  
  <p>If I change the right chart to a different Highchart, that does no longer work. See this JSFiddle:</p>
  
  <p><a href="http://jsfiddle.net/dennismadsen/kmuhw0zf/" rel="nofollow noreferrer">http://jsfiddle.net/dennismadsen/kmuhw0zf/</a></p>
  
  <p>I've tried to debug and added a <code>afterSetExtremes</code> event to the right chart axes:</p>
  
  <pre><code>function rightChartAxisChanged(e) {
      var thisAxis = this;
      console.log('Right chart axis changed: '+thisAxis.options.id);
      console.log('min/max: '+e.min+','+e.max);
      console.log('user min/max: '+e.userMin+','+e.userMax);
  }
  </code></pre>
  
  <p>From what I can see, it seems that the new min/max values in <code>e.min</code> and <code>e.max</code> are computed wrong. The correct values that I've given in the <code>setExtremes</code> call in the <code>syncYAxis</code>, are stored in the <code>e.userMin</code> and <code>e.userMax</code>.</p>