I am trying to use the basic example of 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>

and the TypeScript part

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;
/**
 * (My guess), for Angular to recognize the change in the dataset
 * it has to change the dataset variable directly,
 * so one way around it, is to clone the data, change it and then
 * assign it;
 */
 }

I run npm install ng2-charts --save, npm install chart.js --save

I also import ChartsModule in app.module.ts

import { ChartsModule } from 'ng2-charts/ng2-charts';
@NgModule({
  imports: [ChartsModule]
})

After importing ChartsModule I am getting an error that ng2-charts\ng2-charts.js does not export ChartsModule. Click to view the image of an error

Does anyone has an idea on how to fix that? Thank you

I am trying to use the basic example of NG2-Charts (http://valor-software./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>

and the TypeScript part

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;
/**
 * (My guess), for Angular to recognize the change in the dataset
 * it has to change the dataset variable directly,
 * so one way around it, is to clone the data, change it and then
 * assign it;
 */
 }

I run npm install ng2-charts --save, npm install chart.js --save

I also import ChartsModule in app.module.ts

import { ChartsModule } from 'ng2-charts/ng2-charts';
@NgModule({
  imports: [ChartsModule]
})

After importing ChartsModule I am getting an error that ng2-charts\ng2-charts.js does not export ChartsModule. Click to view the image of an error

Does anyone has an idea on how to fix that? Thank you

• javascript
• angular
• ionic2
• chart.js
• ng2-charts

Share Improve this question Follow asked Oct 13, 2016 at 22:38 Tuba MohsinTuba Mohsin 8111 gold badge33 silver badges77 bronze badges 3

• 1 Please take a look on the following answer on issue #440 at their github. – developer033 Commented Oct 14, 2016 at 3:05
• Still it is not working. It is also showing an error that "Can't bind to 'datasets' since it isn't a known property of 'canvas'" – Tuba Mohsin Commented Oct 14, 2016 at 4:49
• Did you create the project using angular-cli? If so, in the angular-cli.json file, in the "scripts" section, try adding this: "../node_modules/chart.js/src/chart.js" – A B Commented Oct 15, 2016 at 23:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The second issue in the ments

It is also showing an error that "Can't bind to 'datasets' since it isn't a known property of 'canvas'

is probably due to not importing ChartsModule into the module that is rendering the chart.

I had encountered the same initial issue and was able to get past it by adding the following to my rollup-config file

plugins: [
    nodeResolve({jsnext: true, module: true}),
    monjs({
        include: ['node_modules/rxjs/**','node_modules/ng2-charts/**'],
        namedExports: {'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']} 
    }),
    uglify()
]

The documentation for this library could have been better.

I hope the post can help anyone encountering similar issues