ng2-google-charts

Google Charts module for Angular 2 and beyond.

Please see this page for a live demo.

NPM Version Downloads

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,
  ],
  providers: [
    //{provide: 'googleChartsVersion', useValue: '46'},
    //{provide: 'mapsApiKey', useValue: 'MYGOOGLEMAPSAPIKEY'}
  ],
})
export class AppModule { }

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

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

and in the corresponding .ts file:

import { GoogleChartInterface } from 'ng2-google-charts/google-charts-interfaces';

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

The value in dataTable will be passed to the setDataTable() method of ChartWrapper (documentation). If opt_firstRowIsData is true, dataTable will be first passed to arrayToDataTable(dataTable, true) (documentation).

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 tableChart =  {
  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: '&euro;', 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

All events described below are also available as one time events: chartReadyOneTime and so on.

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]='pieChart' (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]='pieChart' (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]='pieChart' (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;
  columnLabel: string;
  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]="comboChart" (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]="comboChart" (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 GoogleChartComponent and ChartWrapper through the component property:

<google-chart [data]="columnChart"></google-chart>
export class AppComponent {

  public columnChart: GoogleChartInterface = {  // use :any or :GoogleChartInterface
      chartType: 'ColumnChart',
      dataTable: [
        ['Country', 'Performance', 'Profits'],
        ['Germany', 700, 1200],
        ['USA', 300, 600],
        ['Brazil', 400, 500],
        ['Canada', 500, 1000],
        ['France', 600, 1100],
        ['RU', 800, 1000]
      ],
      options: {title: 'Countries'}
  };

  myfunction() {
    let ccComponent = this.columnChart.component;
    let ccWrapper = ccComponent.wrapper;

    //force a redraw
    ccComponent.draw();
  }

}

License

MIT