Как привязать линию Х к нужным соответствующим данным линии Y?

Question

[Виталий]

Вот решил использовать chart.js в своем проекте на Vue, но не думаю что тут какие-то серьёзные отличия от простого js.
Проблема в том, что я никак не пойму как в ось Х подставить соответствуищее данные оси Y.
Из примеров chartjs ось X состоит из отдельного непривязанного к оси Y массива данных под названием labels
Вот мой фрагмент рендера графика:

const dataNeedToDisplay =
  [
     {qty: 1, date: '01.01.2020'},
     {qty: 7, date: '02.01.2020'},
     {qty: 3, date: '03.01.2020'},
     {qty: 10, date: '04.01.2020'},
     {qty: 5, date: '05.01.2020'},
   ]

        this.renderChart({
            labels: ["January", "February", "March", "April", "May", "June", "July"], // попадает в ось Х
            datasets: [
              {
                label: "quantity",
                borderColor: "#FC2525",
                pointBackgroundColor: "white",
                borderWidth: 3,
                pointBorderColor: "white",
                backgroundColor: this.gradient,
                data: dataNeedToDisplay.map(el=>el.qty) //  масив значений qty
              },
              {
                label: "Values",
                borderColor: "#05CBE1",
                pointBackgroundColor: "white",
                pointBorderColor: "white",
                borderWidth: 1,
                backgroundColor: this.gradient2,
                data: values_Y_Arr
              }
            ]
          },
          { responsive: true, maintainAspectRatio: false }
          )

Также пробовал в data помещать массив объектов [{x: new Date('2020-02-12 07:00:00'), y: '12.2'}]

const dataNeedToDisplay =
  [
     {qty: 1, date: '01.01.2020'},
     {qty: 7, date: '02.01.2020'},
     {qty: 3, date: '03.01.2020'},
     {qty: 10, date: '04.01.2020'},
     {qty: 5, date: '05.01.2020'},
   ]

        this.renderChart({
            datasets: [
              {
                label: "quantity",
                borderColor: "#FC2525",
                pointBackgroundColor: "white",
                borderWidth: 3,
                pointBorderColor: "white",
                backgroundColor: this.gradient,
                data: [{x: new Date('2020-02-12 07:00:00'), y: '12.2'}, {x: new Date('2020-02-15 07:00:00'), y: '15.2'}]
              },
              {
                label: "Values",
                borderColor: "#05CBE1",
                pointBackgroundColor: "white",
                pointBorderColor: "white",
                borderWidth: 1,
                backgroundColor: this.gradient2,
                data: values_Y_Arr
              }
            ]
          },
          { responsive: true, maintainAspectRatio: false }
          )

Но безрезультатно.

Answer 1

[Виталий]

В опции нужно было добавить:

scales: {
              xAxes: [{
                type: 'time',
                time: {
                  parser: 'DD/MM/YYYY, HH:mm',
                  tooltipFormat: 'll HH:mm',
                  unit: 'day',
                  unitStepSize: 1,
                  displayFormats: {
                    'day': 'DD.MM.YYYY'
                  }
                }
              }]
            }