Introduction
In this article, I will explain about the use of ng2-google-charts. I will explain how to implement ng2 google charts in our project. And also, I will discuss some fundamentals of ng2 google charts.
Prerequisites
- Angular 12
- HTML/Bootstrap
For this article, I have created an Angular project using Angular 12. For creating an Angular project, we need to follow the following steps
Create Project
I have created a project using the following command in the Command Prompt.
Open a project in Visual Studio Code using the following commands.
Installation
The next step is to install the ng2 google charts-related dependencies using the following commands.
Importing
The next step is to import the Ng2GoogleChartsModule in your app.module.ts. This will allow you to use all of the features provided by this Ng2 Google Charts Library.
How to use ng2 google chart functionality
We need to add below line in HTML page to use Ng2 Google Charts.
Org-Chart
component.ts
component.html
Pie-Chart
component.ts
component.html
Line-Chart
component.ts
component.html
Column-Chart
component.ts
component.html
Column-Chart
component.ts
component.html
Summary
In this article, I have discussed various features of Ng2 Google Chart with example in Angular.