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

I am trying to use the basic example of NG2-Charts (http://valor-software.com/ng2-charts/)

I copy pasted the HTML part

  <div style="display: block">
    <canvas baseChart
        [datasets]="barChartData"
        [labels]="barChartLabels"
        [options]="barChartOptions"
        [legend]="barChartLegend"
        [chartType]="barChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)"></canvas>
  </div>

and the TypeScript part

  private barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  private barChartLabels: string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
  private barChartType: string = 'bar';
  private barChartLegend: boolean = true;

  private barChartData: any[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
    { data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }
  ];

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

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

I run npm install ng2-charts --save, npm install chart.js --save and typings install dt~chart.js --save --global

I also imported chart.js in my vendor.ts file

import 'chart.js';

My dependencies:

{
    "@angular/common": "^2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angular2-jwt": "^0.1.18",
    "chart.js": "^2.3.0",
    "core-js": "^2.4.0",
    "json-loader": "^0.5.4",
    "moment": "^2.14.1",
    "ng2-charts": "^1.4.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.11",
    "zone.js": "^0.6.23"
  }

Here is the Error

Unhandled Promise rejection: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo">
            <div style="display: block">
                <canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): [email protected]:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("          <div style="display: block">
                <canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): [email protected]:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block">
                <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): [email protected]:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("  <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): [email protected]:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): [email protected]:140 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("iuminfooneoptionsTwo">
            <div style="display: block">
                <canvas baseChart [ERROR ->][datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLeg"): [email protected]:34
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("          <div style="display: block">
                <canvas baseChart [datasets]="barChartData" [ERROR ->][labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChart"): [email protected]:60
Can't bind to 'options' since it isn't a known property of 'canvas'. ("lay: block">
                <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [ERROR ->][options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartH"): [email protected]:86
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("  <canvas baseChart [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [ERROR ->][legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)"): [email protected]:114
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("ets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [ERROR ->][chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
"): [email protected]:140
    at TemplateParser.parse (eval at <anonymous> (http://localhost:8080/vendor.js:623:1), <anonymous>:133:19)
    at RuntimeCompiler._compileTemplate (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:244:51)
    at eval (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:83)
    at Set.forEach (native)
    at compile (eval at <anonymous> (http://localhost:8080/vendor.js:2103:1), <anonymous>:167:47)
    at ZoneDelegate.invoke (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:192:28)
    at Zone.run (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:85:43)
    at eval (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:451:57)
    at ZoneDelegate.invokeTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:225:37)
    at Zone.runTask (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:125:47)
    at drainMicroTaskQueue (eval at <anonymous> (http://localhost:8080/polyfills.js:4105:1), <anonymous>:357:35)

The NG2-Charts website says I need to include this in the HTML

<script src="node_modules/chart.js/src/chart.js"></script>

But I think thats not correct because how would that statement work in a productive minified / built app? I also thought my webpack import statement would already take care of that? I googled around but sadly only found stuff for some Angular 2 Beta version on NG2 Charts.

Does anyone has an idea on how to fix that?

Thanks and Cheers, Raphael Hippe

Answers:

Answer

Try importing ChartsModule in your app.module.ts like this-

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

imports: [
   .....
   ChartsModule
   .....
]
Answer

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.

Answer

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.

Answer

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>;
Answer

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).

Answer

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
        };
    }
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.