How to make chartjs chart with time y-axis?

I have data something like this:

{
"measurements": [
{
  "id": 10,
  "key": "Demoo",
  "value": "00:00:03.733;",
  "date": "2023-02-08",
  "time": "11:05",
  "value_time_formatted": "00:00:03.733"
},
{
  "id": 11,
  "key": "Demooo 2",
  "value": "00:00:05.191;",
  "date": "2023-02-08",
  "time": "11:31",
  "value_time_formatted": "00:00:05.191"
},
{
  "id": 12,
  "key": "Demo 22",
  "value": "00:00:03.002;",
  "date": "2023-02-08",
  "time": "11:31",
  "value_time_formatted": "00:00:03.002"
}
]}

And when I try out to make a line chart from the date as labels and value_time_formatted as values I get this error:

ERROR TypeError: Cannot create property 'data' on string '00:00:03.733'

The code for bind chart values looks like this:

 this.lineBarLabels = [];
      this.lineBarValue = [];
      res.measurements.forEach(element => {
        this.lineBarLabels.push(element.date);
        this.lineBarValue.push(element.value_time_formatted);
      });

      this.lineBar = new Chart(this.linePresents.nativeElement, {
  type: 'line',
  data: {
    labels: this.lineBarLabels,
    datasets: this.lineBarValue
  }
});
this.lineBar.update();

I tried to convert that time into milliseconds but looks so ugly on-screen and the user needs to convert it back to hours, minutes, seconds, and milliseconds which is so bad from customer side

Your code has a few issues, here the two I could spot:

• the Main error ocurres because chartjs expects a object array for the property dataset, so in your case you would have to change your code to something like this:

  this.lineBar = new Chart(this.linePresents.nativeElement, {
      type: 'line',
      data: {
          labels: this.lineBarLabels,
          datasets: [{data: this.lineBarValue}]
      }
  });
  

• The array this.lineBarLabels is never set (will be a empty array), you would have to change: this.lineBarLabels.includes(element.date); to this.lineBarLabels.push(element.date);

These are the main issues, I don't understand what output should you are looking for, and I don't think that setting the values to strings value_time_formatted will work, but if you fix the above mentioned points, you will be a step closer to a working chart.

Update:

It seems you fixed on mistake in your question, if you want to improve your code here is a tip for you time convertion (link to relevant documentation):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const date = new Date();

// A cleaner solution
let aShortWay = date.toISOString().substring(11,23);

// Your Sode: Not really readable, and pretty long
let yourCode = (date.getUTCHours() ? (date.getUTCHours() > 9 ? date.getUTCHours() : '0' + date.getUTCHours()) : '00') + ':' +
                (date.getUTCMinutes() ? (date.getUTCMinutes() > 9 ? date.getUTCMinutes() : '0' + date.getUTCMinutes()) : '00') + ':' +
                (date.getUTCSeconds() ? (date.getUTCSeconds() > 9 ? date.getUTCSeconds() : '0' + date.getUTCSeconds()) : '00') + '.' +
                (date.getUTCMilliseconds() > 99 ? date.getUTCMilliseconds() : date.getUTCMilliseconds() > 9 ? '0' + date.getUTCMilliseconds() : '00' + date.getUTCMilliseconds());


console.info(`aShortWay Time:${aShortWay}`)
console.info(`yourCode Time:${yourCode}`)

<!-- end snippet -->

I finally find a solution, hope that someone will use it in the right way

After this part of the code:

res.measurements.forEach(element => {
this.lineBarLabels.push(element.date);
this.lineBarValue.push(element.value_time_formatted);
});
this.createLineChart();
I made this createLineChart() method to parse and render the chart:

public createLineChart() {
this.lineBar = new Chart(this.linePresents.nativeElement, {
    type: 'line',
    data: {
      labels: this.lineBarLabels,
      datasets: [{label: this.translate.instant('time'), data: this.lineBarValue, fill: false}]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        y: {
          ticks: {
            callback: function (value) {
              const date = new Date(Number(value) * 1000);
              return date.toISOString().substring(11,23);
            }
          }
        }
      },
      plugins: {
        tooltip: {
          callbacks: {
            label: function (context) {
              const date = new Date(Number(context.formattedValue) * 1000);
              return date.toISOString().substring(11,23);
            }
          }
        }
      }
    }
  }
);
this.lineBar.update();
}