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

Question

this is my app.module.ts I try with a tutorial this ng2-charts

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

this is my html code page.html, i copy and paste from the tutorial

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

this is my typescript page also i copy and paste from tutorial. page.ts

public barChartOptions:any = {
scaleShowVerticalLines: false,
responsive: true};

public barChartLabels:string[] = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
public barChartType:string = 'bar';
public barChartLegend:boolean = true;

public 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
public chartClicked(e:any):void {
    console.log(e);
  }

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

public randomize():void {
    // Only Change 3 values
    let data = [
      Math.round(Math.random() * 100),
      59,
      80,
      (Math.random() * 100),
      56,
      (Math.random() * 100),
      40];
    let clone = JSON.parse(JSON.stringify(this.barChartData));
    clone[0].data = data;
    this.barChartData = clone;
  }

I try all tutorials and examples but i don't know what happen. i get this error. Error detail is:

**Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'canvas'. ("
          <div style="display: block">
            <canvas baseChart
                    [ERROR ->][datasets]="barChartData"
                    [labels]="barChartLabels"
                    [options]"): ng:///StatsPageModule/StatsPage.html@33:20
Can't bind to 'labels' since it isn't a known property of 'canvas'. ("
            <canvas baseChart
                    [datasets]="barChartData"
                    [ERROR ->][labels]="barChartLabels"
                    [options]="barChartOptions"
                    [legend"): ng:///StatsPageModule/StatsPage.html@34:20
Can't bind to 'options' since it isn't a known property of 'canvas'. ("        [datasets]="barChartData"
                    [labels]="barChartLabels"
                    [ERROR ->][options]="barChartOptions"
                    [legend]="barChartLegend"
                    [chartT"): ng:///StatsPageModule/StatsPage.html@35:20
Can't bind to 'legend' since it isn't a known property of 'canvas'. ("      [labels]="barChartLabels"
                    [options]="barChartOptions"
                    [ERROR ->][legend]="barChartLegend"
                    [chartType]="barChartType"
                    (chartHo"): ng:///StatsPageModule/StatsPage.html@36:20
Can't bind to 'chartType' since it isn't a known property of 'canvas'. ("      [options]="barChartOptions"
                    [legend]="barChartLegend"
                    [ERROR ->][chartType]="barChartType"
                    (chartHover)="chartHovered($event)"
                  "): ng:///StatsPageModule/StatsPage.html@37:20**

I just want to make a graph that says the number of users and number of posts created during a week, but every tutorial that I follow I get error, all without exception, sorry my English is not native in case you have some spelling error.

Are you running a angular sample as ionic code (ionic serve) ? — split, Aug 26 '18 at 05:28
I do not think you can run a angular sample as ionic 3 without integrate it or rewrite it. Maybe try and put it into a ionic page. — split, Aug 27 '18 at 17:36
all tutorials that i see about the chart in ionic they were just like that. a don't know make a chart in ionic then — andrea paola vecino pastrana, Aug 28 '18 at 04:31
you have seen: https://stackoverflow.com/questions/42629819/ng2-charts-update-labels-and-data ? and https://forum.ionicframework.com/t/guide-how-to-add-ng2-charts-into-ionic/69347 ? — split, Aug 28 '18 at 05:30

score 0 · Answer 1 · answered Jun 18 '20 at 13:40

0

It's a clash between versions of Angular and ng2-charts With Angular 7.2.0 , I uninstalled ng2-charts and installed ng2-charts@2.2.3

This is helped. for more info. see: https://github.com/valor-software/ng2-charts/issues/1115

answered Jun 18 '20 at 13:40

Asad

31
4

score -1 · Accepted Answer · answered Sep 08 '18 at 19:06

Setting up a chart in an Ionic App using Highcharts

Install Highcharts for ionic:

 npm install highcharts –save

Open the file ./src/pages/home/home.html and replace everything inside the ion-content tag with a div like this.

<div id="container" style="display: block;" ></div>

This div is a container to hold the chart. I write the code in home.ts file. The home.html and home.ts are the files in charge of creating the home page in the app. In home.ts, on the top, import the highcharts module first.

import * as HighCharts from 'highcharts';

Next, create a function called ionViewDidLoad() inside the HomePage class, just after the constructor. The file should look like this:

import {
  Component
} from '@angular/core';
import {
  NavController
} from 'ionic-angular';
import * as HighCharts from 'highcharts';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {}

  ionViewDidLoad() {}
}

The ionViewDidLoad is a special function which is executed after the View has been initialized and loaded; this makes sure to avoid any errors during the components’ access in the view. Create a new HighCharts.chart object in the ionViewDidLoad:

var myChart = HighCharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Fruit Consumption'
  },
  xAxis: {
    categories: ['Apples', 'Bananas', 'Oranges']
  },
  yAxis: {
    title: {
      text: 'Fruit eaten'
    }
  },
  series: [{
    name: 'Jane',
    data: [1, 0, 4]
  }, {
    name: 'John',
    data: [5, 7, 3]
  }]
});

Save the file, and in the terminal type ionic serve –l to run the app in the browser in the lab mode. The app should look like this:

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

2 Answers2