График JS Странная линия графика на xAxes

Question

Я пишу интерфейс с Angular 9, который динамически демонстрирует соотношение обменных курсов. И я использую линейный график. Линейный график и автоматическое обновление работают нормально. Но в моем графике есть странная ошибка. Я не нашел ни одной проблемы, похожей на мою. Я напишу свои варианты диаграммы и скриншоты странной линии.

изображение диаграммы

Разрыв между двумя данными произошел из-за закрытия сервера.

Обновлено изображение

Я выяснил, что эта странная строка отображается, когда я дал типу xAxes 'time'. Надеюсь, вы понимаете мою проблему.

Параметры диаграммы:

lineChartOptions = {
animation: {
  duration: 0,
},
responsive: true,
tooltips: {
  mode: 'index',
  intersect: false,
},
hover: {
  mode: 'nearest',
  intersect: false,
},
legend: {
  labels: {
    fontColor: 'white',
    fontSize: 18,
    fontFamily: 'Sawarabi Mincho',
  },
},
scales: {
  xAxes: [
    {
      type: 'time',
      ticks: {
        autoSkip: false,
        maxTicksLimit: 7,
        source: 'auto',
        beginAtZero: true,
      },
      time: {
        parser: 'HH',
        unit: 'minute',
      },
      displayFormats: {
        hour: 'h:mm a',
      },
      distribution: 'linear',
    },
  ],
},
};

Кроме того, это функция, с помощью которой я отправляю данные метки диаграммы

  //Defining variables
  chartData: any = [];
  sells: Array<number> = [];
  dates: Array<any> = [];

sendDatasToChart() {
    this.currencyService
      .getMyData()
      .subscribe((data) => (this.chartData = data));
    for (let i of this.chartData) {
      this.sells.push(i['sell']);
      const date = new Date(i['date']);
      const momentDate = moment(date.toISOString());
      this.dates.push(momentDate);
    }
    this.lineChartData = [
      {
        data: this.sells,
        label: 'USD/TRY Currency Chart',
        pointRadius: 0,
      },
    ];
    this.lineChartLabels = this.dates;
    this.sells = [];
    this.dates = [];
    this.chartData = [];
  }

Это - это небольшая часть ответа API, который я отправляю на диаграмму:

{
"success": true,
"data": [
    {
        "_id": "5eea3c070a60764b08475e88",
        "dollar": {
            "buy": "6,8526",
            "sell": "6,8567",
            "update": "18:45"
        },
        "euro": {
            "buy": "7,6832",
            "sell": "7,6911",
            "update": "18:45"
        },
        "gbp": {
            "buy": "8,5824",
            "sell": "8,5917",
            "update": "18:45"
        },
        "createdAt": "2020-06-17T15:51:35.226Z",
        "__v": 0
    },
    {
        "_id": "5eea3f8b0a60764b08475e89",
        "dollar": {
            "buy": "6,8528",
            "sell": "6,8570",
            "update": "19:00"
        },
        "euro": {
            "buy": "7,6898",
            "sell": "7,6957",
            "update": "19:00"
        },
        "gbp": {
            "buy": "8,5833",
            "sell": "8,5900",
            "update": "19:00"
        },
        "createdAt": "2020-06-17T16:06:35.275Z",
        "__v": 0
    }
   }

Кроме того, это служба Angular, данные которой я получаю:

  updateChart(){
return this.http
.get(this.path + "/chart-data").subscribe(
  (response) => {
    for (let i of response['data']) {
      this.chartData.push({
        sell: Number(i['dollar']['sell'].replace(/,/, '.')),
        date: i['createdAt']
      })
    }
    this.myData.next(this.chartData)}
)

}