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

I’m trying to add ng2-charts to ng2-admin i followed the readme install but i keep getting the error as shown

Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'datasets' since it isn't a known property of 'base-chart'.
1. If 'base-chart' is an Angular component and it has 'datasets' input, then verify that it is part of this module.
2. If 'base-chart' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
 ("
    <div style="display: block;">
    <base-chart width="400" height="400"
                [ERROR ->][datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="line"): LineChart@5:16

The path ng2-admin/src/app/charts/component/lineChart/lineChart.component.ts

Component

import {Component, ViewEncapsulation} from '@angular/core';
import { ChartsModule } from 'ng2-charts/ng2-charts';


@Component({
  selector: 'bar-chart-demo',
  encapsulation: ViewEncapsulation.None,
  styles: [require('./lineChart.scss')],
  template: require('./lineChart.html')
})

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

I’m maybe missing something but it is not clear from the Readme

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 17 (1 by maintainers)

Most upvoted comments

@gesaleh Make sure that ChartsModule is included in sub-modules as well. NgModule should import ChartsModule and the component should have access to it. Also, use import { ChartsModule } from ‘ng2-charts/ng2-charts’ in the main module of your project. After following these, the error should go away.

madhav5589 on May 9, 2017

Use this instead of <base-chart ...>:

<canvas baseChart ...>

look here for examples.

schrej on Dec 7, 2016

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

@madhav5589 Did you have any trouble loading chart.js onto your index file?

I noticed that Ionic 2 in the tsconfig.json ignores /node_modules. Was wondering how you loaded chart.js if you used npm to install. I ended up throwing the whole chart.js lib into a new folder in ‘/assets’

Thanks for the tip. That ended up working out extremely well. For those who want a more specific example:

import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './dash';
import {ChartsModule} from "ng2-charts"; <-- ADD

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

mattychen on May 24, 2017