Line Chart In Angular 12

Hello friends, In this angular tutorial, We will learn How to show a Line in the angular 12 application with an example. In this Angular 12 Line chart example, we will use the ng2-google-charts npm module which helps us to implement a Line chart in the angular application.

What is ng2-google-charts?

• Ng2GoogleChartsModule is used to represent the data of eCommerce or more.
• It is open-source and is free to use in commercial applications.

Steps for Angular 12 Line Cart Example

• Step1: Create Angular Project
• Step2: Import Ng2GoogleChartsModule
• Step3: Update Template
• Step4: Update TS Code
• Step5: Run Angular Project

Step 1: Create a new project in Angular using this command.

ng new LineChart

Step 2: Import Ng2GoogleChartsModule

npm i --save ng2-google-charts

Step 3: Update Template

<google-chart [data]="lineChart"></google-chart>

Step 4: Update app.component.ts Code

import { Component } from '@angular/core';
import { GoogleChartInterface, GoogleChartType } from 'ng2-google-charts';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  lineChart: GoogleChartInterface = {
    chartType: GoogleChartType.LineChart,
    dataTable: [
      ['Student', 'Marks'],
      ['Parth', 80],
      ['Sagar', 90],
      ['Yasin', 75],
      ['Deepak', 69],
    ],
    options: { 'title': 'Student Marks' },
  };
}

Step 5: Run Angular Project

ng serve

Output:

Conclusion

In our article, we have learned how to show a Line in the angular 12 application with an example.

Thank you.