I'm using Angular 17 and can't find NgChartsModule so i'cant import

[KrisnaDhira]

Reproduction of the problem

ng2-charts is a port & modification of Chart.js component for Angular 2. Sometimes the issue is related with Chart.js instead of ng2-charts. To confirm, if the issue shows in a pure Chart.js project, it is a issue of Chart.js. Pure Chart.js starting template: https://jsfiddle.net/Hongbo_Miao/mvct2uwo/3/

If the issue does not show in a pure Chart.js project, and shows in a ng2-charts project, please try to provide a minimal demo of the problem. ng2-charts starting template: http://plnkr.co/edit/Ka4NXG3pZ1mXnaN95HX5?p=preview

[jenilvora0408]

I also had the same issue. For Angular 17, it would be best if you install ng2-charts version 5.0.4. It would allow you to import 'NgChartsModule' in standalone components as well.

[madieukhang]

Hi @KrisnaDhira with new version using BaseChartDirective instead of NgChartsModule

[aschoerg]

For anyone stumbling accross this, I struggled after migrating from Angular 14 to 18, ng-charts 4 to 6.

I could not make the providers: [provideCharts(withDefaultRegisterables())] to work. I only have modules and adding it to their providers did not work.

The trick for me was to do as @madieukhang said, and import the BaseChartDirective instead of NgChartsModule in my (sub) module.

But then no scales etc. were detected by chart.js. Looked in NgChartsModule... so just add the following lines in your (sub) module:

import { BaseChartDirective } from 'ng2-charts';
import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

@NgModule({
  imports: [ BaseChartDirective  ],
})
export class MySubModule { }

I have no idea if this is a desired way, at least it works. Maybe someone of the devs can help?

[aschoerg]

... after playing around, I finally found out:

in your sub-module just add:

import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';

@NgModule({
  imports: [ BaseChartDirective ],
  providers: [provideCharts(withDefaultRegisterables())]
})
export class MySubModule { }

The docs mislead me with the standalone component...

[lingoyak]

... after playing around, I finally found out:

in your sub-module just add:

import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';

@NgModule({
  imports: [ BaseChartDirective ],
  providers: [provideCharts(withDefaultRegisterables())]
})
export class MySubModule { }

The docs mislead me with the standalone component...

Thanks for the info. It worked.

[Tobias243]

Anybody looking at this using nx and wondering why it's not working, try nx reset.

[khurramshafeeq]

... after playing around, I finally found out:

in your sub-module just add:

import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';

@NgModule({
  imports: [ BaseChartDirective ],
  providers: [provideCharts(withDefaultRegisterables())]
})
export class MySubModule { }

The docs mislead me with the standalone component...

Thanks it worked for me as well.

[netalex]

... after playing around, I finally found out:

in your sub-module just add:

import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2-charts';

@NgModule({
  imports: [ BaseChartDirective ],
  providers: [provideCharts(withDefaultRegisterables())]
})
export class MySubModule { }

The docs mislead me with the standalone component...

encounter the same problem from ng 17 to 18, fixed with @aschoerg solution as well.

IMHO This NEED to be addressed in the readme and/or Docs.