Hello All, This is the Angular 13 Line Chart Example. In the last angular 13 tutorials, We had discussed How to implement Bar Chart in Angular 13.
In this angular 13 example, We will try to show students marks in the form of a Line chart. So, you will get an idea of How to implement a Line chart in the angular 13 application.
Table of Contents
Steps for Angular 13 Line Chart Example
- Step1: Create Angular Project
- Step2: Import Ng2GoogleChartsModule
- Step3: Update Template
- Step4: Update TS Code
- Step5: Run Angular Project
Step1: Create angular project
Create a new angular project in the windows machine using the below command.
ng new <APPNAME>
Now, move to our root project directory using the below command
cd <APPNAME>
Open the newly created angular project in Visual Studio Code. Use the following command to open the project.
code .
Step2: Import Ng2GoogleChartsModule
Now, We need to install the required module dependency using the following command
npm i --save ng2-google-charts
Import the Ng2GoogleChartsModule in app.module.ts as shown below
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { Ng2GoogleChartsModule } from 'ng2-google-charts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule,
FormsModule,
Ng2GoogleChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Step3: Update Template
Now, We have to update app.component.html as shown below
<google-chart
[data]="lineChart"
>
</google-chart>
Step4: Update TS Code
We will write the code in our TypeScript file. Update the app.component.ts file as shown below.
import { Component } from '@angular/core';
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
constructor() {
}
lineChart: GoogleChartInterface = {
chartType: GoogleChartType.LineChart,
dataTable: [
['Student', 'Marks'],
['A', 80],
['B', 90],
['C', 88]
],
options: { 'title': 'Student Marks' },
};
}
In the above example, We are trying to show a Line chart of student marks.
Step5: Run Angular Project
To run the angular project using the below command.
ng serve
or use the below command
npm run start
See the output in http://localhost:4200/

1 thought on “Angular 13 Line Chart Example | Angular 13 Tutorial”