How to bind the X line to the desired corresponding data of the Y line?

Question

JavaScript

All the best!
So I decided to use chart.js in my Vue project , but I don’t think that there are any serious differences from simple js
. The problem is that I don’t understand how to substitute the corresponding Y axis data into the X axis . From the chartjs premiers, the x -axis consists of a separate data array, unattached to the y -axis , called labels . Here is my plot render snippet:

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 }
          )

I also tried to put an array of objects in 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 }
          )

but no result :(
Help please

Answer 1

Added to the options:

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