Create Pie Charts In Angular 10 Application Using ng2-charts And Chartjs

Introduction

This article is all about how to use your data from various resources and generate ng2-charts using Angular 10. In this article, I am using simple data and ng2-charts for creating charts.

Prerequisites

We should have a basic knowledge of Angular 2 and above.
Visual Studio Code can be installed

Implementation

We have different open sources to create charts in Angular 2 and above. Here I am going to use ng2-charts. These charts having a very simple configuration and adopted for all the screens.

Installation

Create a new angular project using the below command
ng new angchar
install bootstrap using the below command
npm install --save bootstrap
Install ng2-charts using npm
npm install --save ng2-charts
You need to install and include the Chart.js library in your application (it is a peer dependency of this library) (more info can be found in the official chart.js

Install Chart.js library

npm install --save chart.js

Now open the newly created angular application .then double click app.module.ts and type below line of codes

import { BrowserModule } from'@angular/platform-browser';
import { NgModule} from'@angular/core';
import { HttpClientModule } from'@angular/common/http';
import { AppComponent } from'./app.component';
import { ChartsModule } from'ng2-charts';
@NgModule({
declarations: [
AppComponent,
MychartComponent
],
imports: [
BrowserModule, HttpClientModule, ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
exportclassAppModule {}

Now create one new component for the chart to implementation by type the below command in terminal

ng g c Mychart

Once new chart component is created include in the app.module.js

import { MychartComponent } from'./mychart/mychart.component';

Here I am going to use Pie ,bar &doughnut chart for demo. So open mychart.component.html, paste the below lines of code. I will explain each line.

<hr>
<divclass="row">
<divclass="column">
<divclass="card">
<divclass="box">
<divid="chart-container">
<canvasbaseChart[chartType]="chartType_a"[data]="chartData_a"[labels]="chartLabels_a"
[options]="chartOptions_a">
</canvas>
</div>
</div>
</div>
</div>
<divclass="column">
<divclass="card">
<divclass="box">
<divid="chart-container">
<canvasbaseChart[chartType]="chartType_b"[data]="chartData_b"[labels]="chartLabels_b"
[options]="chartOptions_b">
</canvas>
</div>
</div>
</div>
</div>
<divclass="column">
<divclass="card">
<divclass="box">
<divid="chart-container">
<canvasbaseChart[chartType]="chartType_c"[data]="chartData_c"[labels]="chartLabels_c"
[options]="chartOptions_c">
</canvas>
</div>
</div>
</div>
</div>
</div>

Here the below line of code is mainly creating the chart.

<canvasbaseChart[chartType]="chartType_a"[data]="chartData_a"[labels]="chartLabels_a"
[options]="chartOptions_a">
</canvas>

In mychartcomponent.ts file – write the below line of codes

import {
Component,
OnInit
} from '@angular/core';
import 'chart.piecelabel.js';
@Component({
selector: 'app-mychart',
templateUrl: './mychart.component.html',
styleUrls: ['./mychart.component.css']
})
exportclassMychartComponentimplementsOnInit {
public data: any;
public chartType_a: string = 'doughnut';
public chartLabels_a: Array < string > ;
public chartData_a: Array < number > ;
public chartOptions_a: any;
public chartType_b: string = 'bar';
public chartLabels_b: Array < string > ;
public chartData_b: Array < number > ;
public chartOptions_b: any;
public chartType_c: string = 'pie';
public chartLabels_c: Array < string > ;
public chartData_c: Array < number > ;
public chartOptions_c: any;
constructor() {
this.data = {
"ITAB_LEAVE": [{}, {}, {}],
"ITAB_LEAVE1": [{
"anzhl": "50",
"rverb": "10"
}],
"ITAB_LEAVE2": [{
"anzhl": "20"
}],
"ITAB_LEAVE3": [{
"anzhl": "30"
}]
}
this.chartData_a = [this.data.ITAB_LEAVE1[0].anzhl, this.data.ITAB_LEAVE1[0].rverb];
this.chartLabels_a = ["Available Leaves", "Taken Leaves"];
this.chartOptions_a = {
pieceLabel: {
render: 'label',
position: 'outside'
}
}
this.chartData_b = [this.data.ITAB_LEAVE2[0].anzhl, this.data.ITAB_LEAVE2[0].rverb];
this.chartLabels_b = ["Available Leaves", "Taken Leaves"];
this.chartOptions_b = {
pieceLabel: {
render: 'label',
position: 'outside'
}
}
this.chartData_c = [this.data.ITAB_LEAVE3[0].anzhl, this.data.ITAB_LEAVE3[0].rverb];
this.chartLabels_c = ["Available Leaves", "Taken Leaves"];
this.chartOptions_c = {
pieceLabel: {
render: 'label',
position: 'outside'
}
}
}
ngOnInit(): void {}
}

[chartType]="chartType_a" - type of chart pie, bar

[data]="chartData_a" - data which we are binding

[labels]="chartLabels_a" - we can customize the label using this. For this please use:

import'chart.piecelabel.js';

Now to add more UI I have added below css changes in mychart.component.css

*{
box - sizing: border - box;
}
body {
font - family: Arial, Helvetica, sans - serif;
}
/* Float four columns side by side */
.column {
float: left;
width: 25 % ;
padding: 010 px;
}
/* Remove extra left and right margins, due to padding */
.row {
margin: 0 - 5 px;
}
/* Clear floats after the columns */
.row: after {
content: "";
display: table;
clear: both;
}
/* Responsive columns */
@mediascreen and(max - width: 600 px) {
.column {
width: 100 % ;
display: block;
margin - bottom: 20 px;
}
}
/* Style the counter cards */
.card {
box - shadow: 04 px8px0rgba(0, 0, 0, 0.2);
padding: 16 px;
text - align: center;
background - color: #f1f1f1;
}

Now run ng serve to see the output

Create Pie Charts In Angular 10 Application Using ng2-charts & chart js

Summary

In this article, we learned about ng2-charts.js in an Angular application to create Charts.