How to register ng2-charts v6 with Angular 17

[anuj9196]

Just upgraded angular from 14 to 17, ng2-charts from 3 to 6 and chartjs as well.

But now, it has started giving an error

ERROR:  Error: "category" is not a registered scale.
    at Registry._get (chart.js:5050:19)
    at Registry.getScale (chart.js:5003:21)
    at chart.js:5788:45
    at each (helpers.segment.js:92:20)
    at Chart.buildOrUpdateScales (chart.js:5775:13)
    at Chart._updateScales (chart.js:5927:14)
    at Chart.update (chart.js:5883:14)
    at new Chart (chart.js:5663:18)
    at ng2-charts.mjs:99:64
    at _ZoneDelegate.invoke (zone.js:368:26)
    at Zone.run (zone.js:130:43)
    at NgZone.runOutsideAngular (core.mjs:14778:28)
    at BaseChartDirective.render (ng2-charts.mjs:99:26)
    at BaseChartDirective.ngOnChanges (ng2-charts.mjs:71:18)
    at BaseChartDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:4101:14)
    at callHookInternal (core.mjs:5136:14)
    at callHook (core.mjs:5167:9)
    at callHooks (core.mjs:5118:17)
    at executeInitAndCheckHooks (core.mjs:5068:9)
    at refreshView (core.mjs:12806:21)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)
    at detectChangesInComponent (core.mjs:12967:5)
    at detectChangesInChildComponents (core.mjs:13028:9)
    at refreshView (core.mjs:12841:13)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)
    at detectChangesInComponent (core.mjs:12967:5)
    at detectChangesInChildComponents (core.mjs:13028:9)
    at refreshView (core.mjs:12841:13)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)
    at detectChangesInEmbeddedViews (core.mjs:12935:13)
    at refreshView (core.mjs:12815:9)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)
    at detectChangesInComponent (core.mjs:12967:5)
    at detectChangesInChildComponents (core.mjs:13028:9)
    at refreshView (core.mjs:12841:13)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)
    at detectChangesInEmbeddedViews (core.mjs:12935:13)
    at refreshView (core.mjs:12815:9)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)
    at detectChangesInComponent (core.mjs:12967:5)
    at detectChangesInChildComponents (core.mjs:13028:9)
    at refreshView (core.mjs:12841:13)
    at detectChangesInView$1 (core.mjs:13015:9)
    at detectChangesInViewIfAttached (core.mjs:12978:5)

Tried to follow the installation guide, after adding providers, it started giving invalid syntax error

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
  ],
  providers: [
    {
      provideCharts(withDefaultRegisterables()),
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

[rynangeles]

.... providers: [provideCharts(withDefaultRegisterables())], ....