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

[Mac-Genius]

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.

[anfluff]

Same stuff. Any help?

[dreweird]

use the "ng2-charts": "^1.4.1" version in your package.json it works for me theres something wrong with their latest version in the angular cli

[kopertop]

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.

[dreweird]

"ng2-charts": "^1.5.0" is now working after I update my angular cli to "version": "1.0.0-beta.26"...it runs smoothly now. Yes, it needs to import chart.js to the specific component.

[anfluff]

Thanks guys! When it imports to sub-module it works fine.

[Mac-Genius]

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"
]

[santekotturi]

Spent 4 hours trying to get ng2-charts into my ionic3/ng4 app. can't get past this error that's now 4 months old??

Can anyone share a working example with all of the imports?

I have import { ChartsModule } from 'ng2-charts/ng2-charts'; and

@NgModule({
  declarations: [
    BarChartDemoComponent
  ],
  entryComponents: [
    BarChartDemoComponent
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    ChartsModule
  ],
  exports: [...  ]
})

I don't know where to import Chart.bundle.min.js, I'm not using vendor.ts or angular-cli.json like various examples here and on SO suggest. So I'm using cdn because...it works??

Using "chart.js": "^2.5.0", "ng2-charts": "^1.5.0",

thanks in advance!

[KASIMACSYS]

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

[seanwuapps]

@skotturi I did import 'chart.js'; in my page component instead of inserting chart.js in html

[MorlaRamakrishna]

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?

[jarridlima]

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.

[aatmmr]

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.

[vignesh-d]

import { NgModule } from '@angular/core'; import { IonicPageModule } from 'ionic-angular'; import { GraphPage } from './graph'; import {ChartsModule} from "ng2-charts";

@NgModule({ declarations: [ GraphPage, ], imports: [ IonicPageModule.forChild(GraphPage), ChartsModule, // <- HERE add it in the sub page of the module.ts file ], }) export class GraphPageModule {}

[Dip11]

import the module in the module.ts file

First this-> import { ChartsModule } from 'ng2-charts'; Then this->

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    ChartsModule // <- HERE
  ],
})
export class AppModule {
}

Hope this will help

[vcochoy]

--Para que me funcionara bien. primero. --Cree el proyecto con ionic start arqui tabs --Luego me fui dentro de la carpeta creada "arqui" y corre en la consola de linux

npm install ng2-charts --save npm install chart.js --save

--Luego copie dentro de los archivos app.module.ts y tab1.module.ts

import { ChartsModule } from 'ng2-charts';

imports: [ChartsModule]...

-- Asi me quedaron, solo como guia

import { IonicModule } from '@ionic/angular'; import { RouterModule } from '@angular/router'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Tab1Page } from './tab1.page';

import { ChartsModule } from 'ng2-charts';

@NgModule({ imports: [ IonicModule, CommonModule, FormsModule, ChartsModule, RouterModule.forChild([{ path: '', component: Tab1Page }]) ], declarations: [Tab1Page] }) export class Tab1PageModule {}

luego pueden seguir el ejemplo que esten viendo. Espero les sirva

[paviad]

This package has been updated for Angular 7, with many bugs fixed and features added. I believe this issue is now resolved. If not, please provide a stackblitz/codepen/... example showing it.

[mail2venkat]

Working on Ionic4 + angular7 + chart.js Project, I have tried all steps give in various website. It still doesn't work for me with Ionic-angular app

[paviad]

Can you provide a repro somehow?

[Sachin1688]

I also expend alot of time please import into it sub module

Thanks guys! When it imports to sub-module it works fine.

[danieldanielecki]

Answer posted by @kopertop worked out, this issue should've been closed.

[Kushagra-05]

I'm facing similar error when trying to display a bubble chart on angular app, I followed the tutorial given here: https://www.tutsmake.com/angular-14-bubble-charts-example/. As far as I have noticed, I have added all the necessary imports etc but I still get the same error.

My app.module.ts file:

`import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSliderModule } from '@angular/material/slider'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatMenuModule} from '@angular/material/menu'; import { MatFormFieldModule } from "@angular/material/form-field";

import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule } from '@angular/router'; import { MatSelectModule} from '@angular/material/select'; //import { ChartsModule } from 'chart.js'; import { ChartsModule } from 'ng2-charts'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatSliderModule, MatToolbarModule, MatMenuModule, MatFormFieldModule, NoopAnimationsModule, RouterModule.forRoot([]), MatSelectModule, ChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }`

My app.components.ts file:

`import { Component, OnInit } from '@angular/core'; import { ChartOptions, ChartType, ChartDataset } from 'chart.js'; import { Color } from 'ng2-charts'; import { ChartsModule } from 'ng2-charts';

@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less']

}) export class AppComponent { title = 'Homepage'; public bubbleChartOptions: ChartOptions = { responsive: true, scales: { xAxes: { ticks: { min: 0, max: 30, }, }, yAxes: { ticks: { min: 0, max: 30, } } } }; public bubbleChartType: ChartType = 'bubble'; public bubbleChartLegend = true; public bubbleChartData: ChartDataset[] = [ { data: [ { x: 10, y: 10, r: 10 }, { x: 15, y: 5, r: 15 }, { x: 26, y: 12, r: 23 }, { x: 7, y: 8, r: 8 }, ], label: 'Series A', }, { data: [ { x: 8, y: 7, r: 5 }, { x: 15, y: 5, r: 15 }, { x: 5, y: 15, r: 15 }, { x: 7, y: 8, r: 8 }, ], label: 'Series B', }, ]; constructor() { } ngOnInit() { } }`

I have also added Charts.js in my angular.json file:

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

Attaching a snip of the errors that I get..

[Kushagra-05]

I'm facing similar error when trying to display a bubble chart on angular app, I followed the tutorial given here: https://www.tutsmake.com/angular-14-bubble-charts-example/. As far as I have noticed, I have added all the necessary imports etc but I still get the same error.

My app.module.ts file:

`import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatSliderModule } from '@angular/material/slider'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatMenuModule} from '@angular/material/menu'; import { MatFormFieldModule } from "@angular/material/form-field";

import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { RouterModule } from '@angular/router'; import { MatSelectModule} from '@angular/material/select'; //import { ChartsModule } from 'chart.js'; import { ChartsModule } from 'ng2-charts'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatSliderModule, MatToolbarModule, MatMenuModule, MatFormFieldModule, NoopAnimationsModule, RouterModule.forRoot([]), MatSelectModule, ChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }`

My app.components.ts file:

`import { Component, OnInit } from '@angular/core'; import { ChartOptions, ChartType, ChartDataset } from 'chart.js'; import { Color } from 'ng2-charts'; import { ChartsModule } from 'ng2-charts';

@component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.less']

}) export class AppComponent { title = 'Homepage'; public bubbleChartOptions: ChartOptions = { responsive: true, scales: { xAxes: { ticks: { min: 0, max: 30, }, }, yAxes: { ticks: { min: 0, max: 30, } } } }; public bubbleChartType: ChartType = 'bubble'; public bubbleChartLegend = true; public bubbleChartData: ChartDataset[] = [ { data: [ { x: 10, y: 10, r: 10 }, { x: 15, y: 5, r: 15 }, { x: 26, y: 12, r: 23 }, { x: 7, y: 8, r: 8 }, ], label: 'Series A', }, { data: [ { x: 8, y: 7, r: 5 }, { x: 15, y: 5, r: 15 }, { x: 5, y: 15, r: 15 }, { x: 7, y: 8, r: 8 }, ], label: 'Series B', }, ]; constructor() { } ngOnInit() { } }`

I have also added Charts.js in my angular.json file:

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

Attaching a snip of the errors that I get..

Sorted Solution Add an export command in app.module.ts: ` imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, ....... ChartsModule

], //Faced errors-'can't bind to dataset etc, as not part of canvas' as not exported the module exports: [ChartsModule], providers: [], bootstrap: [AppComponent]... `

[clomee]

Which Versions are you using? I have a similar problem which is not beeing resolved by your solution.