ng2-charts: Can't bind to 'datasets' since it isn't a known property of 'canvas'

I’m currently trying to use ng2-charts with angular-cli v1.0.0-beta.21. Every time I run ng serve I get this error:

Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("<canvas
    class="chart"
    [ERROR ->][datasets]="datasets"
    [labels]="labels"
    [options]="options"
"): GraphComponent@2:4
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    class="chart"
    [datasets]="datasets"
    [ERROR ->][labels]="labels"
    [options]="options"
    [chartType]="'line'"
"): GraphComponent@3:4
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
    [datasets]="datasets"
    [labels]="labels"
    [ERROR ->][options]="options"
    [chartType]="'line'"
    base-chart
"): GraphComponent@4:4
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
    [labels]="labels"
    [options]="options"
    [ERROR ->][chartType]="'line'"
    base-chart
    ></canvas>"): GraphComponent@5:4 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("<canvas
    class="chart"
    [ERROR ->][datasets]="datasets"
    [labels]="labels"
    [options]="options"
"): GraphComponent@2:4
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    class="chart"
    [datasets]="datasets"
    [ERROR ->][labels]="labels"
    [options]="options"
    [chartType]="'line'"
"): GraphComponent@3:4
Can't bind to 'options' since it isn't a known property of 'canvas'. ("
    [datasets]="datasets"
    [labels]="labels"
    [ERROR ->][options]="options"
    [chartType]="'line'"
    base-chart
"): GraphComponent@4:4
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
    [labels]="labels"
    [options]="options"
    [ERROR ->][chartType]="'line'"
    base-chart
    ></canvas>"): GraphComponent@5:4
    at TemplateParser.parse

I have included ../node_modules/chart.js/dist/Chart.bundle.min.js in the scripts sections of the angular-cli.json file, and I have imported the ChartsModule into my app.module.ts file like so:

import { ChartsModule } from 'ng2-charts/ng2-charts';

@NgModule({
  imports:      [
    BrowserModule,
    HttpModule,
    FormsModule,
    RouterModule.forRoot(appRoutes),
    ChartsModule
  ],
  declarations: [
    AppComponent,
    HomeComponent,
    GraphComponent
  ],
  bootstrap: [],
  providers: []
})

Here is graph.component:

import { Component, OnInit, Input } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

import { ChartsModule } from 'ng2-charts/ng2-charts';

@Component({
  template: `
  <canvas
    class="chart"
    [datasets]="datasets"
    [labels]="labels"
    [options]="options"
    [chartType]="'line'"
    base-chart
    ></canvas>
  `,
  styleUrls: ['./graph.component.css'],
  providers: []
})

export class GraphComponent implements OnInit {

  private datasets = [
    {
      label: "# of Votes",
      data: [12, 19, 3, 5, 2, 3]
    }
  ];

  private labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };

  constructor() {};
  ngOnInit(): void {
    
  };
}

Here is a similar issue where base-chart is used instead of canvas in the html: #535

I was trying to replicate the example chart without any success. Any help would be greatly appreciated.

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 21
Comments: 23 (2 by maintainers)

Most upvoted comments

My issue turned out to be not importing the ChartsModule in the specific module I was working on. It needs to be imported in every sub-module that may be using it, as it exports declarations.

+105

kopertop on Jan 25, 2017

Thanks @jarridlima for the final hint - it worked. Adding the ChartModule also to the import section of your components module.ts (in the sample it is your home page) such as

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { ChartsModule } from 'ng2-charts'; // <- HERE

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ChartsModule // <- HERE
  ],
})
export class HomePageModule {}

does the trick.

aatmmr on Feb 14, 2018

Hi Skotturi, The same config ionic3/ng4 app is working for me. hope you have added in app.module.ts. you have to import chartmodule in your indivitual component module. i have pasted my component module

import { NgModule } from ‘@angular/core’; import { IonicPageModule } from ‘ionic-angular’; import { MyComponent} from ‘./sales-invoice’; import { ChartsModule } from ‘ng2-charts/ng2-charts’;

@NgModule({ declarations: [ MyComponent, ], imports: [ ChartsModule, IonicPageModule.forChild(MyComponent), ], exports: [ MyComponent ] }) export class MyComponentModule {}

as per your code entry component will be in app.module.ts only

KASIMACSYS on May 1, 2017

WORKS FOR ME: I needed to import the ChartModule in the module.ts file of the page that I wanted to use the chart in. I originally only had it imported in app.module.ts.

jarridlima on Nov 26, 2017

It’s working for me after importing into the submodule, but I don’t know why it is working like this. @kopertop can you please explain the reason?

MorlaRamakrishna on Jun 8, 2017

So I got it working as well. All I needed to do was update angular-cli to 1.0.0-beta.26, update ng2-charts to 1.5.0, import the ChartsModule into the app.module file, and add Chart.bundle.min.js to the scripts array in the angular-cli.json file like so:

"scripts": [
  "../node_modules/chart.js/dist/Chart.bundle.min.js"
]

Mac-Genius on Jan 25, 2017