Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including ng2-google-charts with all npm packages installed. Try it out:

require("@angular/common/package.json"); // @angular/common is a peer dependency. require("@angular/core/package.json"); // @angular/core is a peer dependency. var ng2GoogleCharts = require("ng2-google-charts")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ng2-google-charts v6.1.0

Google Charts module for Angular 2 and beyond

ng2-google-charts

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

NPM Version Downloads

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free