javascriptangulartypescriptechartsngx-echarts

Creating the ECharts animated bar chart in Angular 16?

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?

Solution

  • 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.