title: zoom a Highcharts chart programmatically
body: <p>In <a href="http://jsfiddle.net/qq4wnyqo/" rel="nofollow">this JSFiddle demo</a> I have 2 Highcharts line charts. When one of the charts is zoomed, the other chart should zoom in on the same area. The code that does this is</p>
  
  <pre><code>xAxis: {
      events: {
          afterSetExtremes: function (event) {
              var index = document.getElementById('container2').dataset.highchartsChart;
              var chartPartner = Highcharts.charts[index];
              chartPartner.xAxis[0].setExtremes(event.min, event.max);
              chartPartner.showResetZoom();
          }
      },
  },
  </code></pre>
  
  <p>wherein <code>container2</code> is the ID of the DOM element that the other chart is rendered to. This behaviour is almost working, but there are a couple of small problems:</p>
  
  <ul>
  <li>After zooming-in, the gray shading area that is used to select the area to zoom doesn't disappear in Firefox (I haven't tested other browsers)</li>
  <li>The "Reset Zoom" button doesn't appear in the other chart despite the fact that I call <code>chartPartner.showResetZoom();</code></li>
  </ul>