Doughnut/Pie chart: Uncaught TypeError: Cannot read properties of undefined (reading 'display')

[DevWedeloper]

zone.js:177 Uncaught TypeError: Cannot read properties of undefined (reading 'display')
at RadialLinearScale.drawGrid (chart.js:10836:24)
at Object.draw (chart.js:4830:26)
at Chart.draw (chart.js:6048:23)
at chart.js:64:23
at Map.forEach ()
at Animator._update (chart.js:42:22)
at chart.js:33:18
at timer (zone.js:2367:41)
at _ZoneDelegate.invokeTask (zone.js:402:31)
at Zone.runTask (zone.js:173:47)

I just copied this from stackblitz template:

`<canvas
baseChart
[labels]="doughnutChartLabels"
[datasets]="doughnutChartDatasets"
[options]="doughnutChartOptions"
[type]="'doughnut'"

import { ChangeDetectionStrategy, Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { NgChartsModule } from 'ng2-charts'; import { ChartConfiguration } from 'chart.js';

@component({
selector: 'app-doughnut-chart',
standalone: true,
imports: [CommonModule, NgChartsModule],
templateUrl: './doughnut-chart.component.html',
styleUrls: ['./doughnut-chart.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DoughnutChartComponent {
doughnutChartOptions: ChartConfiguration<'doughnut'>['options'] = {
responsive: false,
};

doughnutChartLabels: string[] = [
'Download Sales',
'In-Store Sales',
'Mail-Order Sales',
];

doughnutChartDatasets: ChartConfiguration<'doughnut'>['data']['datasets'] = [
{ data: [350, 450, 100], label: 'Series A' },
{ data: [50, 150, 120], label: 'Series B' },
{ data: [250, 130, 70], label: 'Series C' },
];
}`

Angular version 16.1.0
"chart.js": "^4.4.0"
"ng2-charts": "^5.0.3"