Angular 13 Line Chart Example | Angular 13 Tutorial

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.

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/

Video Tutorial