title: In highcharts,tool-tip does not move when chart has high data unlike when it has low data
body: <p>In <code>highcharts</code>, when I add data using <code>addpoint()</code> allowing <code>'shift'</code> to <code>'true'</code>, the tool-tip does not move when it has large data just like how it moves when it has low data. the amount of data can be recognised by changing range of rangeSelector. Is there anything I can modify or should I include some extra code. I have reproduced the issue in below link.</p>
  
  <p><a href="https://jsfiddle.net/1y3gmkt5/" rel="nofollow noreferrer">https://jsfiddle.net/1y3gmkt5/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Create the chart
  Highcharts.stockChart('container', {
      chart: {
          events: {
              load: function () {
  
                  // set up the updating of the chart each second
                  var series1 = this.series[0];
                  setInterval(function () {
                      var x = (new Date()).getTime(), // current time
                          y = Math.round(Math.random() * 100);
                      series1.addPoint([x, y], true, true);
                  }, 2000);
                  var series2 = this.series[1];
                  setInterval(function () {
                      var x = (new Date()).getTime(), // current time
                          y = Math.round(Math.random() * 50);
                      series2.addPoint([x, y], true, true);
                  }, 2000);
              }
          }
      },
  
      time: {
          useUTC: false
      },
  
      rangeSelector: {
          buttons: [{
              count: 1,
              type: 'minute',
              text: '1M'
          }, {
              count: 5,
              type: 'minute',
              text: '5M'
          }, {
              type: 'all',
              text: 'All'
          }],
          inputEnabled: false,
          selected: 0
      },
  
      title: {
          text: 'Live random data'
      },
  
      exporting: {
          enabled: false
      },
  legend: {
                  enabled: true
              },
  plotOptions: {
          series: {
              marker: {
                  states: {
                      hover: {
                          enabled: true,
                          animation: {duration: 100},
                          enableMouseTracking: true,
                          stickyTracking: true
                      }
                  }
              }
          }
      },
  
  tooltip:{
          shared: true,
                  split: false,
           stickyTracking: true,
                  enableMouseTracking: true,
                  enabled: true,
                  followPointer: true,
                  followTouchMove: true,
            formatter: function(){
                  var tooltip = "";
                  var phaseNameList = "";
                  
                  //tooltip += "&lt;b&gt;I-unit "+ "&lt;br/&gt;"+ "x: "+this.x +"&lt;/b&gt;";
                  tooltip += "&lt;b&gt;I-unit "+ "&lt;br/&gt;"+ "x: "+ new Date(this.x)+
                  "&lt;/b&gt;";
                  tooltip +=  "&lt;br/&gt;"+ "y: "+this.y +"&lt;/b&gt;";
                  tooltip +=  "&lt;br/&gt;"+ this + "&lt;/b&gt;";
                  return tooltip;
                 }
  },
  
      series: [{
          name: 'Random data1',
          data: (function () {
              // generate an array of random data
              var data = [],
                  time = (new Date()).getTime(),
                  i;
  
              for (i = -999; i &lt;= 0; i += 1) {
                  data.push([
                      time + i * 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(),
                  i;
  
              for (i = -999; i &lt;= 0; i += 1) {
                  data.push([
                      time + i * 1000,
                      Math.round(Math.random() * 50)
                  ]);
              }
              return data;
          }())
      }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/stock/highstock.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/stock/modules/export-data.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="height: 400px; min-width: 310px"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>expected result:</strong> when mouse pointer is hovered over any marker and left as it is, then tool-tip should move behind as and when new data arrives. Currently works fine when range selector has low data but not when there is large data.</p>