Chart.js and Ng2-Chart in Cumulocity

[luclib (Lucas Liberman)]

I am currently building an Angular application and I am trying to use Chart.js to generate custom bar charts. This did not work at first, so I did a little digging and discovered the special node package, ng2-chart, developed to employ Chart.js with Angular.

As it happens, I installed the latest version of each dependency, but I soon encountered errors trying to build and serve the application among which is Ng8002 that states:

Error: src/app/features/technical-services/components/live-dashboard/live-dashboard.component.html:81:17 - error NG8002: Can't bind to 'legend' since it isn't a known property of 'canvas'.

I searched on StackOverflow and found that this is likely due to the latest versions of Chart.js and ng2-chart being incompatible with my current development environment:

• Angular: 14.2.12
• NPM: 6.14.18
• c8y/client: 1016.0.324

Has anyone else encountered this problem? What versions of Chart.js and ng2-chart could I use for my application?

[Darpankumar_Lalani (Darpan Lalani)]

Hi,

We have used below compatible versions in Device Chart Widget

“chart.js”: “2.9.3”,
“ng2-charts”: “2.4.2”

Please try that out.

[luclib (Lucas Liberman)]

Hi Darpan,

Could you send me template for how you created your charts in your widget? I have been jumping from one tutorial to another, and I cannot find one that works.

Even this guide from Digital Ocean, which uses almost identical versioning of the packages as yours, is not working for me as my application does not even recognize the ChartsModule import after installing chat.js.

Lucas

[luclib (Lucas Liberman)]

@Darpankumar_Lalani Actually, I have resolved my issue for now.