Points are displayed with a delay rather than immediately

Basic Column Chart

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

TypeScript

const options = {
    exportFileName: 'Trend Chart',
    exportEnabled: true,
    zoomEnabled: false,
    zoomType: 'x',
    theme: 'white',
    toolTip: {
      shared: true,
      enabled: true,
      animationEnabled: false
    },
    axisX: {
      labelFontSize: 14,
      gridThickness: 1,
      gridColor: '#9C9998',
      xValueType: 'dateTime',
      xValueFormatString: 'HH:mm:ss.ff',
      crosshair: {
        enabled: true,
        shared: true,
        snapToDataPoint: true,
      },
      labelAutoFit: true
    },
    axisY: {
      labelFontSize: 14,
      gridThickness: 1,
      gridColor: '#9C9998'
    },
    backgroundColor: '#ffffff',
    data: [{
    markerType: 'circle',
    markerSize: 1,
    type: 'spline',
    xValueType: 'dateTime',
    yValueFormatString: '###',
    xValueFormatString: 'HH:mm:ss.ff',
    showInLegend: false,
    lineThickness: 1,
    axisYType: 'primary',
    lineDashType: null,
    dataPoints: []
  }]
  }
  
};

const chart = new CanvasJS.Chart("chartContainer", options);

chart.render();

let y = 0;

setInterval(() => {
const newDataPoint = {x: new Date().valueOf(), y: this.y++};
this.options.data[0].dataPoints.push(newDataPoint);
console.log('added new dataPoint', newDataPoint);

if(this.options.data[0].dataPoints.length > 30) { //Datapoint is added every 2seconds 2*30 = 60seconds/1minute
	 this.options.axisX.interval = 1;
   this.options.axisX.intervalType = 'minute';
}

chart.render();
}, 2000);