How To Auto-Remove old Datapoints in Chart.js

Question

I've been dealing with such a problem for a long time, but I haven't found a solution yet, help me please

I have a Chart for Real time data, which is updated by Javascript.

But if the script runs to long, the data is getting crammed up. can you help me very fast

The old Data would have to be shifted to the left side an then be deleted.

<script>
var ADCvalues = [];
var Tvalues = [];
var Axvalues = [];
var Ayvalues = [];
var Azvalues = [];
var Gxvalues = [];
var Gyvalues = [];
var Gzvalues = [];
var timeStamp = [];
function showGraph()
{
    var ctx = document.getElementById("Chart").getContext('2d');
    var Chart2 = new Chart(ctx, {
        type: 'line',
        data: {
            labels: timeStamp,  
            datasets: [{
                label: "Ax",
                fill: false, 
                backgroundColor: 'rgba( 100, 200, 100 , 1)', 
                borderColor: 'rgba( 100, 200, 100 , 1)',
                  pointRadius:0,
                  borderWidth:2,
                data: Axvalues,
                
                
            },{
                label: "Ay",
                fill: false,  
                backgroundColor: 'rgba( 200, 100, 100 , 1)', 
                borderColor: 'rgba( 200, 100, 100 , 1)', 
                  pointRadius:0,
                  borderWidth:2,
                data: Ayvalues,
                
            },{
                label: "Az",
                fill: false, 
                backgroundColor: 'rgba( 10, 150, 150 , 1)', 
                borderColor: 'rgba( 10, 150, 150 , 1)', 
                  pointRadius:0,
                  borderWidth:2,
                data: Azvalues,
                
            }
            ],
        },
        tooltips:{
          mode:'nearest',
          intersect: false
          },
        options: {
          animation:{
                  duration:0
                  },
                  hover: {
            animationDuration: 0 
        },
            title: {
                    display: true,
                    text: "Color Codes"
                },
               
            maintainAspectRatio: false,
            elements: {
            line: {
                    tension: 0.2 
                  
                }
            },
            scales: {
                    yAxes: [{
                      max: 0.1,
                      min: -0.1,
                        ticks: {
                            stepSize: 0.1
                        }
                    }]
                    
            },
        }
    });

}


window.onload = function() {
  console.log(new Date().toLocaleTimeString());
  
  
}; 
setInterval(function() {
  getData();
  
  
}, 10); 

function getData() {
  
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
   
  var time = (new Date().toLocaleTimeString());
  var txt = this.responseText;
  var obj = JSON.parse(txt);
      ADCvalues.push(obj.ADC);
      Tvalues.push(obj.Temperature);
      Axvalues.push(obj.Ax);
      Ayvalues.push(obj.Ay);
      Azvalues.push(obj.Az);
      Gxvalues.push(obj.Gx);
      Gyvalues.push(obj.Gy);
      Gzvalues.push(obj.Gz);
     timeStamp.push(time);
      showGraph();
  
      
    var table = document.getElementById("dataTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    var cell6 = row.insertCell(5);
    var cell7 = row.insertCell(6);
    var cell8 = row.insertCell(7);
    var cell9 = row.insertCell(8);
    cell1.innerHTML = time;
    cell3.innerHTML = obj.Temperature;
    cell4.innerHTML = obj.Ax;
    cell5.innerHTML = obj.Ay;
    cell6.innerHTML = obj.Az;
    cell7.innerHTML = obj.Gx;
    cell8.innerHTML = obj.Gy;
    cell9.innerHTML = obj.Gz;

    }
  
  };
  xhttp.open("GET", "readADC", true);
  xhttp.send();
}

</script>