ng2-google-charts

Google Charts module for Angular 2

Please see this page for a live demo.

Install

npm i --save ng2-google-charts

Usage

Import the Ng2GoogleChartsModule in your app.module.ts:

import { Ng2GoogleChartsModule } from 'ng2-google-charts';

@NgModule({
  ...
  imports: [
    ...
    Ng2GoogleChartsModule,
  ],
})
export class AppModule { }

In your templates, use the google-chart component like this:

<google-chart [data]="pieChartOptions"></google-chart>

and in the corresponding .ts file:

pieChartOptions =  {
  chartType: 'PieChart',
  dataTable: [
    ['Task', 'Hours per Day'],
    ['Work',     11],
    ['Eat',      2],
    ['Commute',  2],
    ['Watch TV', 2],
    ['Sleep',    7]
  ],
  options: {'title': 'Tasks'},
};

Please see this page for a demo with more examples.

Events

Ready

The ready event is fired when a chart is completely loaded.

Bind the chartReady event in the google-chart component like this:

<google-chart [data]='pieChartOptions' (chartReady)='ready($event)'></google-chart>

Your ready() function is passed an event whose interface looks like this:

interface ChartReadyEvent {
  message: string;
}

You can import the ChartReadyEvent interface in your .ts file:

import { ChartReadyEvent } from 'ng2-google-charts';

and then use it like:

public ready(event: ChartReadyEvent) {
  // your logic
}

Error

The error event is fired if there are some errors with a chart.

Bind the chartError event in the google-chart component, like this:

<google-chart [data]='pieChartOptions' (chartError)='error($event)'></google-chart>

Your error() function is passed an event whose interface looks like this:

interface ChartErrorEvent {
  id: string;
  message: string;
  detailedMessage: string;
  options: Object;
}

You can import the ChartErrorEvent interface in your .ts file:

import { ChartErrorEvent } from 'ng2-google-charts';

and then use it like:

public error(event: ChartErrorEvent) {
  // your logic
}

See more details about returned values for error event.

Select

The select event is fired when a chart is selected/clicked.

Bind the chartSelect event in the google-chart component, like this:

<google-chart [data]='pieChartOptions' (chartSelect)='select($event)'></google-chart>

Your select() function is passed an event whose interface looks like this:

interface ChartSelectEvent {
  message: string;
  row: number | null;
  column: number | null;
  selectedRowValues: any[];
}

You can import the ChartSelectEvent interface in your .ts file:

import { ChartSelectEvent } from 'ng2-google-charts';

and then use it like:

public select(event: ChartSelectEvent) {
  // your logic
}

License

MIT