Ionic Chartjs line Chart IOS render problem

I am using ionic framework to develop an app in Android and Ios environment. There is a chart in my app which is a line chart showing continuous data over datetime. I employed Chartjs for the graph. The line chart works well in android/ web platform but fail in ios. Could anyone know the reasons behind? many thanks.

Here is the code for reference. this.SBP_line and this.DBP_line are the data pass to the chart. They are in array format. e.g.[{x: “2019-03-13 0:19:47”, y: 130}]

Chart in web/ Android


Chart in IOS

createLineChart(): void {
  //   Chart.scaleService.updateScaleDefaults('linear', {
  //   ticks: {
  //     min: 0,
  //     max: 50, 
  //   }
  // });
  this.lineChartEl = new Chart(this.lineChart.nativeElement, {
    type: 'line',
    data: {
      // labels: this.datetime,
      datasets: [{
          label: 'Systolic Blood Pressure',
          data: this.SBP_line,
          duration: 2000,
          easing: 'easeInQuart',
          backgroundColor: "red",
          borderColor: 'red',
          hoverBackgroundColor: this.chartHoverColours,
          fill: false,
          pointRadius: 5,
          pointHoverRadius: 10,
        },
        {
          label: 'Diastolic Blood Pressure',
          data: this.DBP_line,
          duration: 2000,
          easing: 'easeInQuart',
          backgroundColor: "green",
          borderColor: 'green',
          hoverBackgroundColor: this.chartHoverColours,
          fill: false,
          pointRadius: 5,
          pointHoverRadius: 10,
        }

      ]
    },
    options: {
      hover: {
        mode: null
      },
      pan: {
        // Boolean to enable panning
        enabled: false,

        // Panning directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow panning in the y direction
        mode: 'x'
      },

      // Container for zoom options
      zoom: {
        // Boolean to enable zooming
        enabled: false,

        // Zooming directions. Remove the appropriate direction to disable 
        // Eg. 'y' would only allow zooming in the y direction
        mode: 'x',

        limits: {
          max: 10,
          min: 0.5
        }
      },
      responsive: true,
      maintainAspectRatio: false,

      legend: {
        display: true,
        boxWidth: 80,
        fontSize: 15,
        padding: 0,
        labels: {
          fontColor: "white",
          fontSize: 18
        }
      },
      scales: {
        yAxes: [{
          ticks: {
            fontColor: "white",
            fontSize: 18,
            beginAtZero: true,
            stepSize: 30,
            max: 240,
            min: 30,
          },
          gridLines: {
            color: 'white',
            lineWidth: 1
          }
        }],
        xAxes: [{
          type: 'time',
          time: {
            min: new Date(this.datetime[-1]).getTime(),
            max: new Date(this.datetime[0]).getTime(),
            unit: 'day',
            unitStepSize: 1,
            displayFormats: {
              'day': 'DD MMM '
            }
          },
          ticks: {
            fontColor: "white",
            fontSize: 18,
            autoSkip: true
          },
          gridLines: {
            color: 'transparent',
            lineWidth: 1
          }
        }]
      }
    }
  });
}