ng2-google-charts

Angular Google Charts module (works with Angular 8, Angular 9).

Features

• All chart types
• Dashboard and controls
• Chart Editor
• Formatters
• Events

Sponsoring

If you are using this package commercially or if you find it useful, please consider sponsoring this project.

Install

npm i --save ng2-google-charts

Quick start

Import the module in your app.module.ts:

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

@NgModule({
  ...
  imports: [
    ...
    Ng2GoogleChartsModule,
  ],
  providers: [
})
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';

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

Usage & Demo

Check out the reference documentation and the live demo.

License

MIT