5 Best Google Charts to Use in Angular (2022)

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:

Angular Google Chart install output
Angular Google Chart install output

Import GoogleChartsModule

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

Create Service file

app.service.ts

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

db.json file

Install and run the json server using command-

JSON Server Fake API
JSON Server Fake API

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).

Add Template Code

Add below code in your template file. Find the Type values from here: Chart Types

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

Google Line Chart Output
Google Line Chart Output

Pie Chart

Change the Type in component to ChartType.PieChart

Google Pie Chart Output
Google Pie Chart Output

Histogram Chart

Change chartType to Historgram

Histogram Google Chart
Histogram Google Chart

Gauge Chart

Change chartType to Gauge

Gauge Google Chart
Gauge Google Chart

Combo Chart

Change chartType to ComboChart

Combo Google Chart
Combo Google Chart

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'
Type ‘”Line”‘ is not assignable to type ‘ChartType’

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].

Pass the myType variable in template.

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

Also Read:
Real World Examples of 5 Common Observable Operators
5 Great SEO Ideas To Improve Angular Website Ranking
Angular Material 12 Table, Sorting, Searching & Pagination
RxJS forkJoin: Definition and Real World Uses

Leave a Reply

Your email address will not be published. Required fields are marked *