google-chart

A chart library made by google for creating charts. Use below library to create wide variety of charts with the help of google charts library.

See the official Documentation: https://developers.google.com/chart/interactive/docs/quick_start

I have used this above library to make a npm install package so that I can create some demo charts using this npm package.

Installation

You can install google-chart using the following command:

npm install @arjunshinde/google-chart --save

Working with Angular

Here is a simple example of how to use google-chart in Angular using bar chart

1. Add the path of library to the angular.json file

Open Angular.json file in your project and paste the following line in scripts section.

./node_modules/@arjunshinde/google-chart/google-chart.min.js

2. Create a new component & Initialize the component

In your root project folder of your angular application, create a new component.

ng g c bar-chart

Open the app.component.html file and paste the following code in it.

<app-bar-chart></app-bar-chart>

3. Add view part of bar-chart component

Open the bar-chart.component.html file and paste the following code.

<div id="canvas_barChart"></div>

4. Add the controller part of bar-chart component

Open the bar-chart.component.ts file and paste the following code.

import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.scss'],
})
export class BarChartComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {
    // Initialize the google charts
    google.charts.load('current', { packages: ['corechart'] });
    google.charts.setOnLoadCallback(this.drawChart);
  }

  // drawChart function
  drawChart() {
    // prepare the data
    var data = google.visualization.arrayToDataTable([
      ['Element', 'Density', { role: 'style' }],
      ['Copper', 8.94, '#b87333'],
      ['Silver', 10.49, 'silver'],
      ['Gold', 19.3, 'gold'],
      ['Platinum', 21.45, 'color: #e5e4e2'],
    ]);

    let view = new google.visualization.DataView(data);
    view.setColumns([
      0,
      1,
      {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation',
      },
      2,
    ]);

    // customize the chart
    let options = {
      title: 'Density of Precious Metals, in g/cm^3',
      width: 600,
      height: 400,
      bar: { groupWidth: '95%' },
      // legend: { position: 'none' },
    };

    // draw the chart
    let chart = new google.visualization.BarChart(
      document.getElementById('canvas_barChart')
    );
    chart.draw(view, options);
  }
}

5. Run the angular project

ng serve -o

Open the localhost:4200 URL in your browser.

Usage demo Sample chart

Below is a sample chart that you can use to test the library.