Yogesh Chauhan's Blog

How to add a Line Chart in Angular App?

in Angular on June 15, 2020

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';

  declarations: [...],
  imports: [
  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';

  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

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

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Solution for Xcode 11 Command PhaseScriptExecution failed with a nonzero exit code errorMiscellaneousHow to create a circle that follows a cursor using JavaScript and CSS?CSSasync function in JavaScriptJavaScriptSelector Lists and Combinators in SCSS (Sass)SCSSrandom function in SCSS (Sass)SCSSRecursive WITH Queries in Postgres (Common Table Expressions)Postgres