how to use ng2-chart.js directive in angular 2?

Question

I've installed ng2-charts using npm

npm install ng2-charts --save and npm install chart.js --save

then added below into index.html

<script src="node_modules/chart.js/src/chart.js"></script>

and then added below to app.module.ts import { ChartsModule } from 'ng2-charts';

imports: [
   ChartsModule
]

but I'm getting ZoneAwareError while checking in console, I'm using angular 2.4.1 version. What is the correct way to install charts.js into angular 2? Surprisingly, despite chart.js being so popular, I didn't found neither documentation about its installation in angular2, neither a simple example of its usage there.

Have you added any charts or new code onto the page? On a minimum test example, it just works for me - sorry. :( — mikegeyser
as i have said after compilation ..i'm getting zoneawareerror ..when i check in console....@mikegeyser — rajnikanthsabnekar

Custodio Custodio · Accepted Answer · 2017-05-18T13:16:11

The installations steps you did are correct!

Please refer to this following Plunker that describes a working version of ng2-charts with SystemJS.

.

Your component should look like:

import { Component } from '@angular/core';
import { CHART_DIRECTIVES } from 'ng2-charts/ng2-charts';

@Component({
  selector: 'my-app',
  directives: [CHART_DIRECTIVES],
  styles: [`
    .chart {
      display: block;
    }
  `],
  template: `
    <base-chart
      class="chart"
      [datasets]="datasets"
      [labels]="labels"
      [options]="options"
      [chartType]="'line'">
    </base-chart>
  `
})
export class AppComponent {
  private datasets = [
    {
      label: "# of Votes",
      data: [12, 19, 3, 5, 2, 3]
    }
  ];

  private labels = ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'];

  private options = {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  };
}

how to use ng2-chart.js directive in angular 2?

1 Answers