ng2-google-charts

Angular Google Charts module

Versions

• Version 6 is built with Angular 9, should work with Angular versions from 8 to
• Version 7 is built with Angular 12 in Ivy partial compilation mode, works with Angular versions from 12 to 13.

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, GoogleChartType } from 'ng2-google-charts';

public pieChart: GoogleChartInterface = {
  chartType: GoogleChartType.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