When do we support the Angular 12 project and chart.js 3.3.x ?

[Vitaly1025]

Same question. May be needs some help

[kaulex99]

https://github.com/valor-software/ng2-charts/releases/tag/v3.0.0-rc.2

Looks like it is done already

[TeamGenji]

./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js:317:8-30 - Error: export 'pluginService' (imported as 'pluginService') was not found in 'chart.js' (possible exports: Animation, Animations, ArcElement, BarController, BarElement, BasePlatform, BasicPlatform, BubbleController, CategoryScale, Chart, DatasetController, Decimation, DomPlatform, DoughnutController, Element, Filler, Interaction, Legend, LineController, LineElement, LinearScale, LogarithmicScale, PieController, PointElement, PolarAreaController, RadarController, RadialLinearScale, Scale, ScatterController, Ticks, TimeScale, TimeSeriesScale, Title, Tooltip, _adapters, animator, controllers, defaults, elements, layouts, plugins, registerables, registry, scales)

./node_modules/ng2-charts/__ivy_ngcc__/fesm2015/ng2-charts.js:324:8-32 - Error: export 'pluginService' (imported as 'pluginService') was not found in 'chart.js' (possible exports: Animation, Animations, ArcElement, BarController, BarElement, BasePlatform, BasicPlatform, BubbleController, CategoryScale, Chart, DatasetController, Decimation, DomPlatform, DoughnutController, Element, Filler, Interaction, Legend, LineController, LineElement, LinearScale, LogarithmicScale, PieController, PointElement, PolarAreaController, RadarController, RadialLinearScale, Scale, ScatterController, Ticks, TimeScale, TimeSeriesScale, Title, Tooltip, _adapters, animator, controllers, defaults, elements, layouts, plugins, registerables, registry, scales)

Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:30 - error TS2724: '"chart.js"' has no exported member named 'ChartDataSets'. Did you mean 'ChartDataset'?

4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';

Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:59 - error TS2305: Module '"chart.js"' has no exported member 'ChartPoint'.

4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';
Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:82 - error TS2305: Module '"chart.js"' has no exported member 'PluginServiceGlobalRegistration'.

4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';

Error: node_modules/ng2-charts/lib/base-chart.directive.d.ts:4:115 - error TS2305: Module '"chart.js"' has no exported member 'PluginServiceRegistrationOptions'.

4 import { ChartConfiguration, ChartDataSets, ChartOptions, ChartPoint, ChartType, PluginServiceGlobalRegistration, PluginServiceRegistrationOptions } from 'chart.js';

I have multiple errors when adding it to Angular 12.

[swidziniak]

I'm getting similar errors as @TeamGenji in v3.0.0-rc.3 and chart.js@^3.3.2.

3:10 - error TS2724: Module '"../../../../../../node_modules/chart.js/types/index.esm"' has no exported member 'ChartDataSets'. Did you mean 'ChartDataset'?

3 import { ChartDataSets, ChartOptions, ChartType } from 'chart.js';
           ~~~~~~~~~~~~~
error TS2305: Module '"../../../../../../node_modules/ng2-charts/ng2-charts"' has no exported member 'Label'.

4 import { Label } from 'ng2-charts';
           ~~~~~

[santam85]

Types have changed in v3, we are using directly the ones exported by Chart.js; you'll need to update your code to match. I am working on updating documentation, but in the meantime you can refer to https://www.chartjs.org/docs/master/api/

[bkr32]

@swidziniak were you able to solve the has no exported member 'Label'. error?

[Siedlerchr]

I'm also currently struggling with the no exported member Label.

Edit// I just changed it to chartLabels: string[][]; and it works now but now it renders my time labels twice

[bkr32]

thanks for the tip @Siedlerchr

[santam85]

You should use Chart.js types starting from v3.0; label type is generally TLabel[] and defaults to unknown: https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L3409

[ryan0122]

I'm having trouble with gettin the datalabels to display.

Current setup:

Angular CLI: 12.1.1 "chart.js": "^3.5.1", "chartjs-plugin-datalabels": "^2.0.0", "ng2-charts": "^3.0.0-rc.2"

The charts are working as expected except datalabels plugin. They do not render and none of my configuration options seem to have an effect.

Anyone have this issue?

[Sampath-Lokuge]

Still, doc types are not working? https://valor-software.com/ng2-charts/#/BarChart

e.g. no more ChartDataSets

 public barChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

[p3x-robot]

i think the rc is not correct. reverted to v2...

[santam85]

The RC works perfectly with Chart.js v3, as demonstrated in the https://valor-software.com/ng2-charts/next/ docs (there's a few changes needed for v2 examples) Once again: you'll have to migrate types in your projects to Chart.js v3 official types.

[Siedlerchr]

Yep, can only agree. Been using chart.js v3 and ng-charts rc for a while now. Works fine.

[p3x-robot]

ok, i refactored, thanks, now is correct.

[iamnaveenoff]

error TS2305: Module '"ng2-charts"' has no exported member 'MultiDataSet'.

3 import {Color, Label, MultiDataSet} from 'ng2-charts';

Module '"ng2-charts"' has no exported member 'Label'.

3 import {Color, Label, MultiDataSet} from 'ng2-charts';

TS2305: Module '"ng2-charts"' has no exported member 'Color'. 3 import {Color, Label, MultiDataSet} from 'ng2-charts';

Type '{ ticks: { beginAtZero: true; callback: (val: any) => any; }; }[]' is not assignable to type '_DeepPartialObject<{ type: "linear"; } & CartesianScaleOptions & { beginAtZero: boolean; suggestedMin?: number | undefined; suggestedMax?: number | undefined; ticks: { format: NumberFormatOptions; maxTicksLimit: number; precision: number; stepSize: number; count: number; }; }> | ... 5 more ... | undefined'. Type '{ ticks: { beginAtZero: true; callback: (val: any) => any; }; }[]' is not assignable to type '_DeepPartialObject<{ type: "radialLinear"; } & CoreScaleOptions & { animate: boolean; angleLines: { display: boolean; color: Scriptable<Color, ScriptableScaleContext>; lineWidth: Scriptable<...>; borderDash: Scriptable<...>; borderDashOffset: Scriptable<...>; }; ... 7 more ...; ticks: TickOptions & { ...; }; }>'. Types of property 'reverse' are incompatible. Type '() => { ticks: { beginAtZero: true; callback: (val: any) => any; }; }[]' is not assignable to type 'boolean | undefined'.

98 yAxes: [

after angular 16 update am facing this issue

am using "ng2-charts": "5.0.3", "chart.js": "3.0.0",

is there any implementation doc

[santam85]

As said many times in this thread, follow the type migration guide on Chart.js: https://www.chartjs.org/docs/latest/migration/v3-migration.html