[Chartjs]-NG2-Charts Can't bind to 'datasets' since it isn't a known property of 'canvas'

I had the very same problem. I found on github that you just have to insert the ChartsModule in the submodule as well. First you add in app.module.ts and the, in my case, reports.module.ts.

I’m working with ng2-charts + Angular 7 + Ionic 4, and I spent several hours searching for a solution. And this finally worked to me (after following the initial steps, of course, like installing ng2-charts and charts.js). Just import ChartsModule on the following files:

app.module.ts

import { ChartsModule } from 'ng2-charts';
...
imports: [ChartsModule]

yourPage.module.ts

import { ChartsModule } from 'ng2-charts';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: YourPagePage }]),
    **ChartsModule**
  ]
})

I was trying to import it also in yourPage.page.ts, but the solution was to import it in yourPage.module.ts!

Try it out.

i’m working with ng2-chart@3.0.0-rc.2

looks like the property chartType is now called type

so it should look something like this:

    <canvas 
      style="display: block;background-color: #3a3939;" 
      width="600" 
      height="300" 
      id="canvas" 
      #myCanvas
      
      baseChart 
      [type]="lineChartType" 
      [datasets]="lineChartData" 
      [labels]="lineChartLabels" 
      [options]="mfChartOptions"
      [legend]="lineChartLegend">
    </canvas>

If your component is declared in another module other than app.module.ts you will simply do the following:

app.module.ts

import { ChartsModule } from 'ng2-charts';

...

@NgModule({
   ...

   imports: [
      ...
      ChartsModule,
      ...
   ]
})
export class AppModule{ }

module-where-your-component-is-declared.module.ts

import { ChartsModule } from 'ng2-charts';

...

@NgModule({
   declarations: [YourComponent],
   imports: [
      ...
      ChartsModule,
      ...
   ],
   ...
})
export class ModuleWhereYourComponentIsDeclared { }

The reason might be: You are using Ng2Charts directly from your child components/module.

Solutions: You have to import the Ng2Charts on your parent module as well. (Import Ng2Charts [ng2-charts], to your parent and child module)

Happy fixing everyone.

Thank you.
Marjun Villegas

In case you are using a Shared Module, you also need to export the ChartsModule from there, to make it available to all your components which use your Shared Module.

// Simplified module only showing what's important for ChartsModule
import { NgModule } from '@angular/core';
import { ChartsModule } from 'ng2-charts';

@NgModule({
    declarations: [],
    imports: [ChartsModule],
    exports: [ChartsModule]
})

export class SharedModule {
    static forRoot(): ModuleWithProviders<SharedModule> {
        return {
            ngModule: SharedModule
        };
    }
}

Instead of importing the ChartsModule in App Module, import it in inside module where your are using. For example, home module (if using Charts in Home page).

In my case, it was nothing to do with including ChartsModule in multiple modules or exporting it.

I had created a chart component that used ng-chart and then found I needed another version of it. So I copied the component, renamed the class and template file, but forgot to update the templateUrl property in the @Component decorator.

Having two different components referencing the same template file gave the exact same error:

Can’t bind to ‘datasets’ since it isn’t a known property of ‘canvas’

As soon as I changed the new component to use the correct HTML template, the error was resolved.

FYI, I reference ChartsModule as shown in @sanket’s answer in the module of my chart components and the module of the page components that reference them (so it’s not needed in AppModule).

ANGULAR 14

The current import now is:

import { NgChartsModule } from 'ng2-charts';

// In your App's module:
imports: [
  NgChartsModule
]

source

If you are using Angular version 14, ng2-charts version 4, and a standalone component, then you have to import NgChartsModule in both app.module.ts and your.component.ts files.

your.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { ChartConfiguration, ChartOptions } from 'chart.js';
import { NgChartsModule } from 'ng2-charts';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, NgChartsModule],
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgChartsModule } from 'ng2-charts';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgChartsModule,
  ],
  providers: [
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

In my case I had to change how I import and a little change in my html file tag:

chart.component.ts

import {Component} from '@angular/core';
import {CHART_DIRECTIVES} from 'ng2-charts/ng2-charts';

@Component({
    selector: 'chart-balance',
    template: require('./templates/chart-balance.template'),
    styles: [`.chart {display: block; width: 100%;}`],
    directives: [CHART_DIRECTIVES]
})

export class ChartBalanceComponent {
    public barChartOptions:any = {
        scaleShowVerticalLines: false,
        responsive: true,
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true,
                    callback: label => `${label.toLocaleString()}`
                }
            }]
        }
    };
    public barChartLabels:string[] = ['2014', '2015', '2016'];
    public barChartType:string = 'bar';
    public barChartLegend:boolean = true;

    public barChartData:any[] = [
        {data: [32131, 3432, 543], label:'Test 1'},
        {data: [54353, 432, 768], label:'Test 2'}
    ];

    // events
    public chartClicked(e:any):void {
        console.log(e);
    }

    public chartHovered(e:any):void {
        console.log(e);
    }

}

Here was another change I did:

notice — > base-chart class=”chart” …

chart-balance.template

<base-chart class="chart"
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></base-chart>

ng2-charts

export * from './components/charts/charts';
declare var _default: {
    directives: any[][];
};
export default _default;

charts

import { OnDestroy, OnInit, OnChanges, EventEmitter, ElementRef } from '@angular/core';
export declare class BaseChartComponent implements OnDestroy, OnChanges, OnInit {
    static defaultColors: Array<number[]>;
    data: number[] | Array<number[]>;
    datasets: any[];
    labels: Array<any>;
    options: any;
    chartType: string;
    colors: Array<any>;
    legend: boolean;
    chartClick: EventEmitter<any>;
    chartHover: EventEmitter<any>;
    private ctx;
    private cvs;
    private parent;
    private chart;
    private initFlag;
    private element;
    constructor(element: ElementRef);
    ngOnInit(): any;
    ngOnChanges(): any;
    ngOnDestroy(): any;
    getChartBuilder(ctx: any): any;
    private refresh();
}
export interface Color {
    backgroundColor?: string | string[];
    borderWidth?: number | number[];
    borderColor?: string | string[];
    borderCapStyle?: string;
    borderDash?: number[];
    borderDashOffset?: number;
    borderJoinStyle?: string;
    pointBorderColor?: string | string[];
    pointBackgroundColor?: string | string[];
    pointBorderWidth?: number | number[];
    pointRadius?: number | number[];
    pointHoverRadius?: number | number[];
    pointHitRadius?: number | number[];
    pointHoverBackgroundColor?: string | string[];
    pointHoverBorderColor?: string | string[];
    pointHoverBorderWidth?: number | number[];
    pointStyle?: string | string[];
    hoverBackgroundColor?: string | string[];
    hoverBorderColor?: string | string[];
    hoverBorderWidth?: number;
}
export interface Colors extends Color {
    data?: number[];
    label?: string;
}
export declare const CHART_DIRECTIVES: Array<any>;