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 this:

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 this:

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 this:

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 interface looks like this:

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

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

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

and then use it like this:

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 interface looks like this:

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

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

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

and then use it like this:

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