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]="pieChartData"></google-chart>

and in the corresponding .ts file:

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

Make sure you are compiling your Angular app with the Ahead-of-Time (AOT) compiler (option --aot).

Formatters

You can specify an array of multiple formatter types and configurations like this:

public tableChartData =  {
  chartType: 'Table',
  dataTable: [
    ['Department', 'Revenues', 'Another column', 'ColorFormat'],
    ['Shoes', 10700, -100, 100],
    ['Sports', -15400, 25, 500],
    ['Toys', 12500, 40, 800],
    ['Electronics', -2100, 889, 1000],
    ['Food', 22600, 78, 1100],
    ['Art', 1100, 42, 400]
  ],
  formatters: [
    {
      columns: [1, 2],
      type: 'NumberFormat',
      options: {
        prefix: '€', negativeColor: 'red', negativeParens: true
      }
    },
    {
      columns: [3],
      type: 'ColorFormat',
      options: {
        ranges: [
          {from: 100, to: 900, fromBgColor: 'green', toBgColor: 'yellow'}
        ]
      }
    }
  ],
  options: {title: 'Countries', allowHtml: true}
};

Please refer to the Google Chart documentation for formatter types and options.

Please see this page for a demo with more examples.

Events

chartReady

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

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

<google-chart [data]='pieChartData' (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
}

chartError

The chartError 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]='pieChartData' (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.

chartSelect

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

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

<google-chart [data]='pieChartData' (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[];
  selectedRowFormattedValues: 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
}

mouseOver

The mouseOver event is fired when the user moves the mouse over some chart item.

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

<google-chart [data]="comboChartData" (mouseOver)="mouseOver($event)"></google-chart>

Your mouseOver() function is passed an event whose class looks like this:

class ChartMouseOverEvent {
  position: DataPointPosition;
  boundingBox: BoundingBox;
  value: any;
  tooltip: ChartHTMLTooltip | null;
  columnType: string;
  columnLabel: string;
}

You can import the ChartMouseOverEvent class in your .ts file:

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

and then use it like:

public mouseOver(event: ChartMouseOverEvent) {
  // your logic
}

mouseOut

The mouseOut event is fired when the user moves the mouse out of some chart item.

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

<google-chart [data]="comboChartData" (mouseOut)="mouseOut($event)"></google-chart>

Your mouseOut() function is passed an event whose class looks like this:

class ChartMouseOutEvent {
  position: DataPointPosition;
  boundingBox: BoundingBox;
  value: any;
  columnType: string;
  columnLabel: string;
}

You can import the ChartMouseOutEvent class in your .ts file:

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

and then use it like:

public mouseOut(event: ChartMouseOutEvent) {
  // your logic
}

Advanced usage

You can access Google Chart's underlying ChartWrapper through the wrapper property of the component object:

<google-chart #cchart [data]="columnChartData"></google-chart>

import {ViewChild} from '@angular/core';

export class AppComponent {

  @ViewChild('cchart') cchart;

  myfunction() {
    let googleChartWrapper = this.cchart.wrapper;

    //force a redraw
    this.cchart.redraw();
  }

}

License

MIT