updateSeries moves page scroll

[M-Barari]

Hi. I'm using live line chart and when I scroll bellow the chart on each update it moves up page scroll a little bit (my interval is 1000 so each second)

here is the code:

<template>
  <div id="chart">
    <apexchart type="line" height="100" ref="chart" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
let lastDate = 0;
let data = []
let TICKINTERVAL = 86400000
let XAXISRANGE = 777600000
function getDayWiseTimeSeries(baseval, count, yrange) {
  let i = 0;
  while (i < count) {
    let x = baseval;
    let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    data.push({
      x, y
    });
    lastDate = baseval
    baseval += TICKINTERVAL;
    i++;
  }
}
  
getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(), 10, {
  min: 10,
  max: 90
})

function getNewSeries(baseval, yrange) {
  let newDate = baseval + TICKINTERVAL;
  lastDate = newDate

  for(let i = 0; i< data.length - 10; i++) {
    // IMPORTANT
    // we reset the x and y of the data which is out of drawing area
    // to prevent memory leaks
    data[i].x = newDate - XAXISRANGE - TICKINTERVAL
    data[i].y = 0
  }

  data.push({
    x: newDate,
    y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  })
}

function resetData(){
  // Alternatively, you can also reset the data at certain intervals to prevent creating a huge series 
  data = data.slice(data.length - 10, data.length);
}

export default {
  name: "BtcChart",
  props: {
    color: String,
  },
  data() {
    return {
      series: [{
        data: data.slice()
      }],
      chartOptions: {
        chart: {
          id: 'realtime',
          height: 100,
          type: "line",
          zoom: {
            enabled: false,
          },
          animations: {
            enabled: true,
            easing: "linear",
            dynamicAnimation: {
              speed: 1000
            }
          },
          toolbar: {
            show: false,
          },
        },
        dataLabels: {
          enabled: false,
        },
        stroke: {
          curve: "smooth",
          width: 2,
          colors: [this.color],
        },
        grid: {
          show: false,
        },
        tooltip: {
          enabled: false,
          x: {
            format: "dd MMM yyyy",
          },
        },
        xaxis: {
          axisBorder: {
            show: false,
          },
          axisTicks: {
            show: false,
          },
          labels: {
            show: false,
          },
        },
        yaxis: {
          show: false,
        },
      },
    };
  },
  mounted: function () {
    var me = this
    window.setInterval(function () {
      getNewSeries(lastDate, {
        min: 10,
        max: 90
      })
      
      me.$refs.chart.updateSeries([{
        data: data
      }])
    }, 1000)
  
    // every 60 seconds, we reset the data to prevent memory leaks
    window.setInterval(function () {
      resetData()
      
      me.$refs.chart.updateSeries([{
        data
      }], false, true)
    }, 30000)
  },
};
</script>