How to add a Line Chart in Angular App?

There are few plugins available to add Line Chart in Angular App.

In this article, I am going to use ng2-charts, which is an open-source JS library, and it is exclusively built for Angular 2 and later versions. I have tested the code and it works for Angular 9.

It is easily installable via npm and creates really amazing charts in few minutes.

The ng2-charts supports Chart.js.

Let’s make an app with just Linie Chart so that it will be easily understandable.

Step 1

//make new angular app

ng new line-chart-app

Step 2

// go inside app folder

cd line-chart-app

Step 3

// create angular component 

ng g c line-chart

where g c stands for globally create.

Step 4

// install ng2-charts and Chart js via npm

npm install ng2-charts chart.js --save

Step 5

This is an important step and you must have done it many times. After you create a new component and add a module, you need to import it to app.module.ts file.

Import ChartsModule like this example code.

import { ChartsModule } from 'ng2-charts';

@NgModule({
  declarations: [...],
  imports: [
    ChartsModule,
    ...
  ],
  providers: [...],
  bootstrap: [...]
})

export class AppModule { }

Step 6

Go to line-chart.component.ts file and add the code below.

import { Component, OnInit } from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { Color, Label } from 'ng2-charts';

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

export class LineChartComponent {

  public lineChartData: ChartDataSets[] = [
    { data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' },
  ];
  public lineChartLabels: Label[] = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
  public lineChartOptions: (ChartOptions & { annotation: any }) = {
    responsive: true,
  };
  public lineChartColors: Color[] = [
    {
      borderColor: 'black',
      backgroundColor: 'rgba(255,0,0,0.3)',
    },
  ];
  public lineChartLegend = true;
  public lineChartType = 'line';
  public lineChartPlugins = [];

  constructor() { }

  ngOnInit() {
  }
}

Step 7

Go to line-chart.component.html file and add this code:

<div style="display: block;">
  <canvas baseChart
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [plugins]="barChartPlugins"
    [legend]="barChartLegend"
    [chartType]="barChartType">
  </canvas>
</div>

Open the app in browser, it should look like this:

Share this post