Creating the ECharts animated bar chart in Angular 16?

Question

The ECharts animated bar chart works fine on Stackblitz. This is the Stackblitz Angular 16 demo.

When I try the same demo in a local Angular 16 project, it produces the following errors.

Error: src/app/animated-echarts.component.ts:21:55 - error NG8002: Can't bind to 'autoResize' since it isn't a known property of 'div'.

21       '<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>',
                                                         ~~~~~~~~~~~~~~~~~~~~


Error: src/app/animated-echarts.component.ts:21:76 - error NG8002: Can't bind to 'options' since it isn't a known property of 'div'.

21       '<div echarts (chartInit)="onChartInit($event)" [autoResize]="false" [options]="options"></div>',

This is the local version on Github. To see the error:

git clone git@github.com:fireflysemantics/charts.git
cd charts
npm i
ng serve -o

Thoughts?

https://github.com/xieziyu/ngx-echarts/issues/399 – Ole May 31 '23 at 07:14 — Ole, May 31 '23 at 07:14

score 0 · Accepted Answer · answered Jun 07 '23 at 09:52

OK the Angular CLI created a version 15 project, and so the right ngx-echarts for that is version 15.03.

In order to fix it I updated the Angular CLI.

npm uninstall -g @angular-cli
npm install -g @angular/cli@latest

And recreated the project as an Angular 16 project, and now it works.

Creating the ECharts animated bar chart in Angular 16?

1 Answers1