YogeshChauhan.com
How to add a Line Chart in Angular App?
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';

@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:

dreamhost

Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?



Recently Posted

Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP Feb 26 Here’s what we can do with PHP date() function Feb 25 How to set default timezone using PHP? Feb 24 WordPress: How to loop through a repeater field in ACF? Feb 24 How to get ACF values from custom post type?



You might also like these

How to find the HCF or GCD and LCM of two given numbers using Swift?SwiftCSS Overflow Property with ExamplesCSSFlash of Invisible Text and Mitt Romney Web Font ProblemCSSAngular 9 time clock update every minute, second, hourAngularPHP arrays for US states’ full names and abbreviationsPHPLearn to create profile card using HTML and CSSCSS