Chart not displaying using chart.js and angular

Question

I am trying to implement a chart using the mean stack accessing data from the database. however the chart is not displaying. This is the html:

<canvas id="canvas"></canvas>

and this is the component.ts

import { Component, OnInit } from '@angular/core';
import { ChartsService } from 'src/app/service/charts.service';
import { Chart } from 'chart.js';
import { map } from 'rxjs';
@Component({
  selector: 'app-charts',
  templateUrl: './charts.component.html',
  styleUrls: ['./charts.component.css'],
})
export class ChartsComponent implements OnInit {
  chart = [];
  constructor(private chartService: ChartsService) {}

  ngOnInit(): void {
    this.chartService.noOfEqu().subscribe((res) => {
      let areaCode = res.map((res) => res.areaCode);
      let inoperEqu = res.map((res) => res.inoperEqu);
      let operEqu = res.map((res) => res.operEqu);
      let date = res.map((res) => res.eventDate);

      let Dates = [];
      date.forEach((res) => {
        let jsdate = new Date(res);
        Dates.push(
          jsdate.toLocaleTimeString('en', {
            year: 'numeric',
            month: 'short',
            day: 'numeric',
          })
        );
      });
      console.log(operEqu);
      console.log(Dates);
      console.log(areaCode);
      console.log(inoperEqu);

      new Chart('canvas', {
        type: 'line',
        data: {
          labels: [],
          datasets: [
            {
              data: areaCode,
              borderColor: '#3cba9f',
              fill: false,
            },
            {
              data: operEqu,
              borderColor: '#ffcc00',
              fill: false,
            },
          ],
        },
        options: {
          plugins: {
            legend: {
              display: false,
            },
          },
          scales: {
            x: {
              ticks: {
                display: true,
              },
            },
            y: {
              ticks: {
                display: true,
              },
            },
          },
        },
      });
    });
  }
}

It is not displaying on the front end, but the console contains an error:

core.mjs:6461 ERROR Error: "category" is not a registered scale. at Registry._get (chart.esm.js:4892:1) at Registry.getScale (chart.esm.js:4847:1) at chart.esm.js:5518:1 at each (helpers.segment.js:105:1) at Chart.buildOrUpdateScales (chart.esm.js:5505:9) at Chart._updateScales (chart.esm.js:5652:1) at Chart.update (chart.esm.js:5613:1) at new Chart (chart.esm.js:5402:1) at charts.component.ts:37:7 at Object.next (Subscriber.js:110:1)

I dont know where im going wrong, any assistance would be appreciated.