Blog Detail

  • Home
  • Google chart in angular

Google chart in angular

In this blog I posted how to install google chart in angular and sample code for pie chart.

Install

npm install angular-google-charts

Import Google chart module

Import Google chart module in app.module.ts like below

import { GoogleChartsModule } from 'angular-google-charts';

@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}

Add google-chart component in your application components

<google-chart
  [title]="chart.title"
  [type]="chart.type"
  [data]="chart.data"
  [columns]="chart.columnNames"
  [options]="chart.options"
>
</google-chart>

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  chart:any;

  constructor() { 
    this.chart = {
      type: 'PieChart',
      title: 'Inwards',
      data: [['NEW',30],['WORKING',30],['SHIPPED',60]],
      columnNames: ['Inward','Total'],
      options:{},
    }
  }

  ngOnInit(): void {
  }

}

Write a comment