Can't bind to 'data' since it isn't a known property of 'canvas'

[creyD]

Reproduction of the problem I followed the guide on the readme and when adding the (slightly adjusted) example <canvas baseChart [data]="salesData" [options]="chartOptions"> </canvas> two errors get thrown:

Error: src/app/public/public-dashboard/public-dashboard.component.html:15:17 - error NG8002: Can't bind to 'data' since it isn't a known property of 'canvas'.

15                 [data]="salesData"
                   ~~~~~~~~~~~~~~~~~~

  src/app/public/public-dashboard/public-dashboard.component.ts:6:16
    6   templateUrl: './public-dashboard.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PublicDashboardComponent.

Error: src/app/public/public-dashboard/public-dashboard.component.html:16:17 - error NG8002: Can't bind to 'options' since it isn't a known property of 'canvas'.

16                 [options]="chartOptions">
                   ~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/public/public-dashboard/public-dashboard.component.ts:6:16
    6   templateUrl: './public-dashboard.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component PublicDashboardComponent.

I installed the latest version for everything, I am now on 4.1.2 for chart.js, ng2-charts 4.1.1 and angular is on version 14. The NgChartsModule is in my app.module.ts and the import { NgChartsModule, NgChartsConfiguration } from 'ng2-charts'; are in the imports and providers of public.module.ts. I am pretty new to angular, so maybe there is some inheritance not working or similar.

[kschins]

I am in the same boat. I came across another post that suggested using attr.data="{{salesData}}" which gets the app compiling but the chart does not display. I am using the same versions you mentioned above too. Have you tried Angular 15?

[creyD]

No, didn't try Angular 15 yet, did it work for you?

[kschins]

I have not yet either. I'm going through https://stackblitz.com/github/santam85/ng2-charts-bar-template?file=package.json&preset=node but looks like it's still using the older versions of ng2-charts and chart.js

"ng2-charts": "^3.1.2",
"chart.js": "^3.4.0",

[UPDATE] Doesn't work with Angular 15 either.

[kschins]

@creyD I got it working. I added NgChartsModule in app.module.ts initially but I was actually using canvas within a submodule so I had to move the import statement into account.module.ts and things began working.

[JoramM]

I am using Angular 15 but tested it also with Angular 14 and have a similar problem. I use the following (latest) versions:

"chart.js": "^4.2.0",
"ng2-charts": "^4.1.1",

ng serve or ng build works fine. But when I execute the tests (ng test), I get the following errors in the console: ...

This can also be reproduced with the Stackblitz Example: https://stackblitz.com/edit/github-pd92l1?file=package.json I only adjusted the versions like mentioned above. If you then run ng test you will see it in the logs.

For me it looks like a ng2-charts bug. 🤔 The tests doesn't fail because of this error but it is spamming my logs.

[nawlbergs]

pretty sure your importing wrong.. lib works for me.

"chart.js": "^4.2.1",
"ng2-charts": "^4.1.1",
"@angular/cli": "~15.2.0",

you need to import in current module...

    importProvidersFrom(
      NgChartsModule,
    ),

or.. if using in a standalone component

  imports: [
     NgChartsModule
  ],

[clomee]

pretty sure your importing wrong.. lib works for me.

"chart.js": "^4.2.1",
"ng2-charts": "^4.1.1",
"@angular/cli": "~15.2.0",

you need to import in current module...

    importProvidersFrom(
      NgChartsModule,
    ),

or.. if using in a standalone component

  imports: [
     NgChartsModule
  ],

I have updated angular, chartjs and ng2-charts to the versions you are using. Now i don´t know what exactly you mean. I have a parent module and in its module.ts i haveimports: [NgChartsModule],. The problem is in the child-component of the module. If i make the component standalone and import it directly in the component it works. @Component({ ... standalone: true, imports: [NgChartsModule], }) But i want the import to happen in the module which contains the component. And that doesn´t work. So how should i use importProvidersFrom in the Module to make it work, i can´t find how to implement it properly.

[nawlbergs]

heres an example (let me know if this works)

import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
     importProvidersFrom(
        NgChartsModule,
     ),
  ]  
})
.catch(err => {
  console.error(err);
})

[nawlbergs]

if your still using modules... it "should" work just by adding the NgChartsModule to your root level module import array

[clomee]

heres an example (let me know if this works)

import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
     importProvidersFrom(
        NgChartsModule,
     ),
  ]  
})
.catch(err => {
  console.error(err);
})

Both do not work for me.