Add and remove data simultaneously to ChartJS chart

For visualisation purposes I'm trying to add data to a chart and simultaneously remove the first data point from the chart every 500ms.

It works when I do either of .addData() or removeData() on their own, but when I try and combine them into one function to run at the same time, neither of them works.

Is there a way I can create this function to simultaneously add and remove data, or at a minimum remove the first data point shortly after I've added the new last data point?

Here's the data and setup:

    var ctx = document.getElementById('myChart').getContext('2d');
    ctx.height = 220;
    var data = {
  "labels": [
    "0",
    "1",
    "2",
    "3",
        "4"
  ],
  "datasets": [
    {
      "label": "2014",
      "backgroundColor": "#0055FA",
      "fill": true,
      "data": [
        "50",
                "40",
        "55",
        "35",
        "45",
        "50",
        "15",
                "100"
      ],
      "borderColor": "transparent",
      "borderWidth": "0",
            "pointBackgroundColor":"#ffffff"
    }
  ]
};
    var options = {
  "title": {
    "display": false,
    "text": "Ad Revenue Comparison 2014-2015",
    "position": "bottom",
    "fullWidth": true,
    "fontColor": "#aa7942",
    "fontSize": 16
  },
  "legend": {
    "display": false,
    "fullWidth": true,
    "position": "top"
  },
  "scales": {
    "yAxes": [
      {
        "ticks": {
          "beginAtZero": true,
          "display": true
        },
        "gridLines": {
          "display": false
        },
        "scaleLabel": {
          "display": false,
          "labelString": "USD in Millions"
        },
        "display": false
      }
    ],
    "xAxes": {
      "0": {
        "ticks": {
          "display": false
        },
        "display": false,
        "gridLines": {
          "display": false
        },
        "scaleLabel": {
          "display": false
        }
      }
    }
  },
  "tooltips": {
    "enabled": false
  },
  "elements": {
    "arc": {
      "backgroundColor": "#009BD0"
    },
    "line": {
      "backgroundColor": "#009BD0",
      "fill": true,
      "borderColor": "#e2fdff"
    },
    "point": {
      "radius": 3,
      "pointStyle": "circle",
      "backgroundColor": "#ffffff"
    }
  }
};

Here are the functions:

    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: options
    });

  function removeData(chart) {
      chart.data.labels.pop();
      chart.data.datasets.forEach((dataset) => {
          dataset.data.pop();
      });
      chart.update();
  }

  function addData(chart, label, data) {
      chart.data.labels.push(label);
      chart.data.datasets.forEach((dataset) => {
          dataset.data.push(data);
      });
      chart.update();
  }


setInterval(function(){ 
    addData(myChart,"4",Math.floor(Math.random() * 60)); 
    removeData(myChart);
}, 500);
//setInterval(function(){ removeData(myChart); }, 500);

</script>