ng2-charts\ng2-charts.js does not export ChartsModule

I am trying to use the basic example of NG2-Charts (

I copy pasted the HTML part

<div style="display: block">
<canvas baseChart

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 {

public chartHovered(e:any):void {

public randomize():void {
// Only Change 3 values
let data = [
Math.round(Math.random() * 100),
(Math.random() * 100),
 (Math.random() * 100),
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';
  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



The second issue in the comments

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}),
        include: ['node_modules/rxjs/**','node_modules/ng2-charts/**'],
        namedExports: {'node_modules/ng2-charts/ng2-charts.js': ['ChartsModule']} 

The documentation for this library could have been better. I encountered a few other issues as well which I documented at

I hope the post can help anyone encountering similar issues


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.