title: How do I prevent Highstock right range handle keep slipping off the max value when adding data
body: <p>I have a Highstock chart with three lines. When I add data, it will at in semi regular cases let the max range handle move off the right side, and then stay put instead of staying glued to the right side as expected. This behavior is not wanted.</p>
  
  <p>Before it slips:
  <a href="https://i.stack.imgur.com/BuYxC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BuYxC.png" alt="enter image description here"></a>
  After it slips:
  <a href="https://i.stack.imgur.com/nQ7qv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nQ7qv.png" alt="enter image description here"></a></p>
  
  <p>I have made a simplified example 
  <a href="https://jsfiddle.net/eskil_saatvedt/rdwdbht1/3/" rel="nofollow noreferrer">https://jsfiddle.net/eskil_saatvedt/rdwdbht1/3/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;script src="https://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
  &lt;div id="container" style="height: 400px; min-width: 310px"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>$(function() {
  
    Highcharts.setOptions({
      global: {
        useUTC: false
      }
    });
  
    // Create the chart
    $('#container').highcharts('StockChart', {
      chart: {
          type: 'line',
      },
  
      rangeSelector: {
        buttons: [{
          count: 1,
          type: 'minute',
          text: '1M'
        }, {
          count: 5,
          type: 'minute',
          text: '5M'
        }, {
          type: 'all',
          text: 'All'
        }],
        inputEnabled: false,
        selected: 2
      },
  
      title: {
        text: 'Live random data'
      },
  
      exporting: {
        enabled: false
      },
  
      series: [{
        name: 'Random data',
        data: (function() {
          // generate an array of random data
          var data = [],
            time = (new Date()).getTime();
          data.push([
            time +1 * 1000,
            Math.round(Math.random() * 100)
          ]);
  
          return data;
        }())
      },
      {
        name: 'Random data2',
        data: (function() {
          // generate an array of random data
          var data = [],
            time = (new Date()).getTime();
          data.push([
            time +1 * 1000,
            Math.round(Math.random() * 100)
          ]);
  
          return data;
        }())
      },
      {
        name: 'Random data3',
        data: (function() {
          // generate an array of random data
          var data = [],
            time = (new Date()).getTime();
          data.push([
            time +1 * 1000,
            Math.round(Math.random() * 100)
          ]);
  
          return data;
        }())
      }
      ]
    });
  
  });
  
  function UpdateData() {
    var chart = $('#container').highcharts();
    var x = (new Date()).getTime(), // current time
      y = Math.round(Math.random() * 100),
      k = Math.round(Math.random() * 100)+50,
      z = Math.round(Math.random() * 100)+20;
    chart.series[0].addPoint([x, y], false, false);
    chart.series[1].addPoint([x, z], false, false);
    chart.series[2].addPoint([x, k], false, false);
    chart.redraw();
  }
  
  setInterval(function() {
    UpdateData();
  }, 1000);
  </code></pre>
  
  <p>Normally I would display 2 temperatures and gain, using it for room heat control. </p>