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

[gesaleh]

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

[schrej]

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

<canvas baseChart ...>

look here for examples.

[gesaleh]

Thank you i don't have the error but now my chart is not displayed
when i use canvas baseChart and in the component selector is bar-chart where this selector should go inside canvas ? or a new selector
HTML File
`

CLICK

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

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

export class LineChart {
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 {
`

[gesaleh]

Ok cleaned the html since i was mixing between the line and bar chart example
now i have the error about Chart.js
"Error in ./LineChart class LineChart - inline template:8:12 caused by: ng2-charts configuration issue: Embedding Chart.js lib
the new HTML look like the example in the link now
`

Update

`
i tried to understand where this should be added knowing that ng2-admin use webpack

[gesaleh]

I tried all the possible ways to add the Chart.js but im always getting this error
is there i way to the Chart.js in the component I'M sure missing something

[mwagena]

including below was the fix for ionic2.
import 'chart.js' import { ChartsModule } from 'ng2-charts/ng2-charts';

[madhav5589]

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

[mattychen]

@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 { NgModule } from '@angular/core';
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 {}
```

[madhav5589]

@mattychen No, I didn't have any trouble with loading chart.js in index file.
If you follow the first two installation steps from here, you should have chart.js installed as npm package. You can verify whether chart.js is installed or not by clicking on Dependencies and expanding npm folder from your IDE. Once it is installed there, you need to include only chart.js in your index.html file.
It should work that way.

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

[viprinrin00]

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.

This works for me too.

[ioclaudio]

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.

This works for me too with:
local packages:
@ionic/app-scripts : 3.1.11
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2

[piyushgargmp]

import {ChartsModule} from "ng2-charts";

Thanks Really Good

[piyushgargmp]

Can u Suggest me for Device Compatibility

[vignesh-d]

import {ChartsModule} from "ng2-charts"; <-- import this in your module.ts sub page

If the Chart is in home.ts file
open home.module.ts file in that import and declare.

[piyushgargmp]

Can it possible to make horizontal scroll on chart dynamically without
given fixed width, height in ionic ? .

if possible Please Provide me some guide.

Thanks

On Thu, Nov 29, 2018 at 1:07 PM vignesh [e-mail] wrote:

import {ChartsModule} from "ng2-charts"; <-- import this in your module.ts
sub page

If the Chart is in home.ts file
open home.module.ts file in that import and declare.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/535#issuecomment-442735308,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AiehZOXOkah73JSFyHrEUPNkMuqHeYOcks5uz46fgaJpZM4LGu4v
.

[piyushgargmp]

also how to give width height to legend and can we customize the legend

On Tue, Dec 4, 2018 at 11:15 AM Piyush Kumar [e-mail]
wrote:

Can it possible to make horizontal scroll on chart dynamically without
given fixed width, height in ionic ? .

if possible Please Provide me some guide.

Thanks

On Thu, Nov 29, 2018 at 1:07 PM vignesh [e-mail] wrote:

import {ChartsModule} from "ng2-charts"; <-- import this in your
module.ts sub page

If the Chart is in home.ts file
open home.module.ts file in that import and declare.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/valor-software/ng2-charts/issues/535#issuecomment-442735308,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AiehZOXOkah73JSFyHrEUPNkMuqHeYOcks5uz46fgaJpZM4LGu4v
.

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