5 Best Google Charts to Use in Angular
Tags: angular, googlecharts, linechart, piechart
Published: 2021-10-14 06:57:17

The article is originally published to my blog: StackBlogger- [5 Best Google Charts For Angular](https://stackblogger.com/5-best-google-charts-for-angular/)

A chart is a graphical representation of information in the form of diagram etc. Google provides various free charts to use in applications. They are simple to use and powerful tool to plot diagrams with data. In this article we will talk about how to use some of the Google Charts in Angular application.

## Angular Google Charts

Angular Google Chart is a wrapper of Google Charts project built in Angular. It is a package that can be used in the Angular application by installing it using npm.

## 5 Best Google Charts to use in Angular

1. **Line Chart**– a chart in which information is displayed in the form of data series
2. **Pie Chart**– a circle chart divided into parts to show the information
3. **Histogram Chart**– it is essentially a pie chart with an area of centre cut out
4. **Gauge Chart**– also called a dial chart, uses needles to show the information
5. **Combo Chart**– combination of two or more lines or columns to plot information
Let’s implement each charts in Angular application.

Install Google Charts in Angular
The first thing is to install the google charts library in Angular application so that you can plot various charts.

**Note:** I am using Angular 12 for this example.

Run the command below to install the angular google charts package:

```
npm install angular-google-charts
```

![Angular Google Chart install output](https://stackblogger.com/wp-content/uploads/2021/10/google-chart-min.png)

## Import GoogleChartsModule

The next thing is to import `GoogleChartsModule` module in `app.module.ts` file.

```javascript
import { GoogleChartsModule } from 'angular-google-charts';
 
@NgModule({
  ...
  imports: [
    ...
    GoogleChartsModule,
    ...
  ],
  ...
})
export class AppModule {}
```

## Create Service file

`app.service.ts`
```javascript
import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs";
 
@Injectable()
export class AppService {
    constructor(private httpClient: HttpClient) {
    }
 
    getChartData(): Observable<Array<Array<string | number>>> {
        return this.httpClient.get<Array<Array<string | number>>>(`http://localhost:3000/chartData`);
    }
}
```

I am using json-server to create a fake JSON api.

`db.json` file

```javascript
{
    "chartData": [
        [
            "London",
            8136000
        ],
        [
            "New York",
            8538000
        ],
        [
            "Paris",
            2244000
        ],
        [
            "Berlin",
            3470000
        ],
        [
            "Kairo",
            19500000
        ]
    ]
}
```

Install and run the json server using command-

```
npm install -g json-server
```
```
json-server --watch db.json
```

![JSON Server Fake API](https://stackblogger.com/wp-content/uploads/2021/10/json-server-fake-api-min.png)

Now we are ready to plot charts. Let’s plot charts one by one.

## Line Chart

It’s time to plot the chart on page. I have consumed the fake json api (you can use your real api to plot).

```javascript
import { Component, OnInit } from '@angular/core';
import { ChartType } from "angular-google-charts";
import { AppService } from './app.service';
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'google-charts';
  myType = ChartType.LineChart;
  chartData: Array<Array<string | number>> = [];
 
  constructor(private appService: AppService) {
  }
 
  ngOnInit() {
    this.getChartData();
  }
 
  private getChartData() {
    this.appService.getChartData().subscribe(data => {
      this.chartData = data;
    })
  }
}
```

## Add Template Code

Add below code in your template file. Find the `Type` values from here: [Chart Types](https://github.com/FERNman/angular-google-charts/blob/master/libs/angular-google-charts/src/lib/types/chart-type.ts)

```javascript
<google-chart [title]="'Some Title'" [type]="myType" [data]="chartData">
</google-chart>
```

Save the files and run open browser. You will notice following chart on the page.

![Google Line Chart Output](https://stackblogger.com/wp-content/uploads/2021/10/line-chart-output-min.png)

## Pie Chart

Change the `Type` in component to `ChartType.PieChart`

```javascript
myType = ChartType.PieChart;
```

![Google Pie Chart Output](https://stackblogger.com/wp-content/uploads/2021/10/google-pie-chart-min.png)

## Histogram Chart

Change `chartType` to `Historgram`

```javascript
myType = ChartType.Histogram;
```

![Histogram Google Chart](https://stackblogger.com/wp-content/uploads/2021/10/image-4.png)

## Gauge Chart

Change `chartType` to `Gauge`

```javascript
myType = ChartType.Gauge;
```

![Gauge Google Chart](https://stackblogger.com/wp-content/uploads/2021/10/image-5.png)

## Combo Chart

Change `chartType` to `ComboChart`

```javascript
myType = ChartType.ComboChart;
```

![Combo Google Chart](https://stackblogger.com/wp-content/uploads/2021/10/image-6.png)

**Note:** The Combo and Line chart looks similar. The only difference is Combo charts can have multiple charts. As of now I have used only one chart in Combo. You can pass array of multiple data.

## Common Errors while using Google Charts

`Type '' is not assignable to type 'ChartType'.`

![Type ‘”Line”‘ is not assignable to type ‘ChartType’](https://stackblogger.com/wp-content/uploads/2021/10/type-string-is-not-assignable-to-type-ChartType-min.png)

The solution of this error is- **do not provide any string chart type. Get the type value from `ChartType` Enum and then pass it to [type]**.

```javascript
// import the Enum
import { ChartType } from "angular-google-charts";
 
// get chart type
myType = ChartType.LineChart;
```

Pass the `myType` variable in template.

The article is originally published to my blog: StackBlogger- [5 Best Google Charts For Angular](https://stackblogger.com/5-best-google-charts-for-angular/)

## Conclusion

The article explains about how to integrate various Google Charts in an Angular application. If you want to optimize your Angular application then I would recommend checking out this article: [5 Best Ways To Optimize Angular For Scaling](https://stackblogger.com/5-best-ways-to-optimize-angular-for-scaling/)

Also Read:
[Real World Examples of 5 Common Observable Operators](https://stackblogger.com/real-world-examples-of-some-common-observable-operators/)
[5 Great SEO Ideas To Improve Angular Website Ranking](https://stackblogger.com/5-great-seo-ideas-to-improve-angular-website-ranking/)
[Angular Material 12 Table, Sorting, Searching & Pagination](https://stackblogger.com/angular-material-data-table-tutorial/)
[RxJS forkJoin: Definition and Real World Uses](https://stackblogger.com/rxjs-forkjoin-definition-and-real-world-uses/)