Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

angular

chart.js

I'm trying to use ng2-charts and run into an error that says the elements I'm using are incorrect.
I've tried a few answers on this site, but no luck:

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

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

Here is my code: 

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    templateUrl: "four-item-horse-shoe-graph.component.html",
    styleUrls: ["four-item-horse-shoe-graph.component.css"],
    selector: "four-item-horse-shoe"
})

export class FourItemHorseShoeGraphComponent {
    // Doughnut
    public doughnutChartLabels: string[] = ["Download Sales", "In-Store 
        Sales", "Mail-Order Sales"];
    public doughnutChartData: number[] = [350, 450, 100];
    public doughnutChartType: string = "doughnut";

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

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

And the HTML:

<div style="display: block">
<canvas baseChart
        [data]="doughnutChartData"
        [labels]="doughnutChartLabels"
        [chartType]="doughnutChartType"
        (chartHover)="chartHovered($event)"
        (chartClick)="chartClicked($event)">
</canvas>

systemjs.config.js:

            'chart': 'npm:chart.js/src/chart.js',
        "ng2-charts": "node_modules/ng2-charts"
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        "ng2-charts": { main: "ng2-charts.js", defaultExtension: "js" }

app.module.ts

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

declare let jQuery: Object;

@NgModule({
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule,
    CoreFeatureModule,
    LayoutModule,
    ChartsModule

ERROR:

Unhandled Promise rejection: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9 ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError {_nativeError: Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<d…} Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
consoleError @ zone.js:405
_loop_1 @ zone.js:434
drainMicroTaskQueue @ zone.js:438
ZoneTask.invoke @ zone.js:349
zone.js:407 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9
Error: Template parse errors:
Can't bind to 'data' since it isn't a known property of 'canvas'. ("<div style="display: block">
    <canvas baseChart
            [ERROR ->][data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutCh"): FourItemHorseShoeGraphComponent@2:9
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
    <canvas baseChart
            [data]="doughnutChartData"
            [ERROR ->][labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="char"): FourItemHorseShoeGraphComponent@3:9
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [ERROR ->][chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="): FourItemHorseShoeGraphComponent@4:9
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
    at SyntaxError.BaseError [as constructor] (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1595:29) [<root>]
    at new SyntaxError (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:1793:18) [<root>]
    at TemplateParser.parse (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:11222:21) [<root>]
    at JitCompiler._compileTemplate (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27474:70) [<root>]
    at eval (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:64) [<root>]
    at Set.forEach (native) [<root>]
    at JitCompiler._compileComponents (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27357:21) [<root>]
    at createResult (http://localhost:44444/node_modules/@angular/compiler/bundles/compiler.umd.js:27240:21) [<root>]
    at Zone.run (http://localhost:44444/node_modules/zone.js/dist/zone.js:113:43) [<root> => <root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:57 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:486:31) [<root>]
    at resolvePromise (http://localhost:44444/node_modules/zone.js/dist/zone.js:471:17) [<root>]
    at http://localhost:44444/node_modules/zone.js/dist/zone.js:520:17 [<root>]
    at Zone.runTask (http://localhost:44444/node_modules/zone.js/dist/zone.js:151:47) [<root> => <root>]
    at drainMicroTaskQueue (http://localhost:44444/node_modules/zone.js/dist/zone.js:418:35) [<root>]
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:44444/node_modules/zone.js/dist/zone.js:349:25) [<root>]
consoleError @ zone.js:407
_loop_1 @ zone.js:434
drainMicroTaskQueue @ zone.js:438
ZoneTask.invoke @ zone.js:349
like image 859
ArtisanSamosa Avatar asked May 10 '17 21:05

ArtisanSamosa

3 Answers

I needed to import the ChartModule in the module.ts file of the component that I wanted to use the chart in. I originally only had it imported in app.module.ts.

like image 118
ArtisanSamosa Avatar answered Nov 17 '22 05:11

ArtisanSamosa

Try using the attribute syntax for binding:

Instead of:

[data]="doughnutChartData"

Try:

attr.data="{{doughnutChartData}}"

I'm not certain if this will work in your case, but this has to do with what's a DOM property versus an attribute, and how Angular handles binding for both.

like image 20
chrispy Avatar answered Nov 17 '22 05:11

chrispy

In the app.module.ts file, within the NgModule decorater there is an array called imports, mention ChartsModule in the imports array like this

imports: [BrowserModule, RouterModule.forRoot(appRoutes),ChartsModule ],

It helped me. It can be helpful to you as well

like image 3
hasan najeeb Avatar answered Nov 17 '22 04:11

hasan najeeb
Sign in to Comment

Related questions

404 Error on page refresh with Angular 7, NGINX and Docker
Angular2: change border color for error in form validation
How to use moment-timezone in Angular 2 class?
Module not found: Error: Can't resolve 'hammerjs'
Where to Put Common CSS in Angular
Resetting Angular 2 App
Angular: Get current index in ngFor
Error TS2315: Type 'ElementRef' is not generic material angular
Using MatToolTip with icons in Angular 5
Add Bootstrap 4 to Angular 6 or Angular 7 application
How to fix "Error: Expected to be running in 'ProxyZone', but it was not found." in mocha testing?
Angular 2 Email Validator
Import interface in Angular 2
Passing context to template through ngOutletContext in Angular2
Angular Material Dialog return value
[karma-server]: TypeError: Cannot read property 'range' of undefined - Angular Unit Testing in CI environment
error TS2304: Build:Cannot find name 'Iterable' after upgrading to Angular 4
Check if router.url contains specific string?
Angular 6 - can't resolve all parameters for AppComponent
How to Encrypt and Decrypt in Angular 6

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!