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

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
  1. import { BrowserModule } from'@angular/platform-browser';
  2. import { NgModule} from'@angular/core';
  3. import { HttpClientModule } from'@angular/common/http';
  4. import { AppComponent } from'./app.component';
  5. import { ChartsModule } from'ng2-charts';
  6. @NgModule({
  7. declarations: [
  8. AppComponent,
  9. MychartComponent
  10. ],
  11. imports: [
  12. BrowserModule, HttpClientModule, ChartsModule
  13. ],
  14. providers: [],
  15. bootstrap: [AppComponent]
  16. })
  17. 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
  1. 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.
  1. <hr>
  2. <divclass="row">
  3. <divclass="column">
  4. <divclass="card">
  5. <divclass="box">
  6. <divid="chart-container">
  7. <canvasbaseChart[chartType]="chartType_a"[data]="chartData_a"[labels]="chartLabels_a"
  8. [options]="chartOptions_a">
  9. </canvas>
  10. </div>
  11. </div>
  12. </div>
  13. </div>
  14. <divclass="column">
  15. <divclass="card">
  16. <divclass="box">
  17. <divid="chart-container">
  18. <canvasbaseChart[chartType]="chartType_b"[data]="chartData_b"[labels]="chartLabels_b"
  19. [options]="chartOptions_b">
  20. </canvas>
  21. </div>
  22. </div>
  23. </div>
  24. </div>
  25. <divclass="column">
  26. <divclass="card">
  27. <divclass="box">
  28. <divid="chart-container">
  29. <canvasbaseChart[chartType]="chartType_c"[data]="chartData_c"[labels]="chartLabels_c"
  30. [options]="chartOptions_c">
  31. </canvas>
  32. </div>
  33. </div>
  34. </div>
  35. </div>
  36. </div>
Here the below line of code is mainly creating the chart.
  1. <canvasbaseChart[chartType]="chartType_a"[data]="chartData_a"[labels]="chartLabels_a"
  2. [options]="chartOptions_a">
  3. </canvas>
In mychartcomponent.ts file – write the below line of codes
  1. import {
  2. Component,
  3. OnInit
  4. } from '@angular/core';
  5. import 'chart.piecelabel.js';
  6. @Component({
  7. selector: 'app-mychart',
  8. templateUrl: './mychart.component.html',
  9. styleUrls: ['./mychart.component.css']
  10. })
  11. exportclassMychartComponentimplementsOnInit {
  12. public data: any;
  13. public chartType_a: string = 'doughnut';
  14. public chartLabels_a: Array < string > ;
  15. public chartData_a: Array < number > ;
  16. public chartOptions_a: any;
  17. public chartType_b: string = 'bar';
  18. public chartLabels_b: Array < string > ;
  19. public chartData_b: Array < number > ;
  20. public chartOptions_b: any;
  21. public chartType_c: string = 'pie';
  22. public chartLabels_c: Array < string > ;
  23. public chartData_c: Array < number > ;
  24. public chartOptions_c: any;
  25. constructor() {
  26. this.data = {
  27. "ITAB_LEAVE": [{}, {}, {}],
  28. "ITAB_LEAVE1": [{
  29. "anzhl": "50",
  30. "rverb": "10"
  31. }],
  32. "ITAB_LEAVE2": [{
  33. "anzhl": "20"
  34. }],
  35. "ITAB_LEAVE3": [{
  36. "anzhl": "30"
  37. }]
  38. }
  39. this.chartData_a = [this.data.ITAB_LEAVE1[0].anzhl, this.data.ITAB_LEAVE1[0].rverb];
  40. this.chartLabels_a = ["Available Leaves", "Taken Leaves"];
  41. this.chartOptions_a = {
  42. pieceLabel: {
  43. render: 'label',
  44. position: 'outside'
  45. }
  46. }
  47. this.chartData_b = [this.data.ITAB_LEAVE2[0].anzhl, this.data.ITAB_LEAVE2[0].rverb];
  48. this.chartLabels_b = ["Available Leaves", "Taken Leaves"];
  49. this.chartOptions_b = {
  50. pieceLabel: {
  51. render: 'label',
  52. position: 'outside'
  53. }
  54. }
  55. this.chartData_c = [this.data.ITAB_LEAVE3[0].anzhl, this.data.ITAB_LEAVE3[0].rverb];
  56. this.chartLabels_c = ["Available Leaves", "Taken Leaves"];
  57. this.chartOptions_c = {
  58. pieceLabel: {
  59. render: 'label',
  60. position: 'outside'
  61. }
  62. }
  63. }
  64. ngOnInit(): void {}
  65. }
[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:
  1. import'chart.piecelabel.js';
Now to add more UI I have added below css changes in mychart.component.css
  1. *{
  2. box - sizing: border - box;
  3. }
  4. body {
  5. font - family: Arial, Helvetica, sans - serif;
  6. }
  7. /* Float four columns side by side */
  8. .column {
  9. float: left;
  10. width: 25 % ;
  11. padding: 010 px;
  12. }
  13. /* Remove extra left and right margins, due to padding */
  14. .row {
  15. margin: 0 - 5 px;
  16. }
  17. /* Clear floats after the columns */
  18. .row: after {
  19. content: "";
  20. display: table;
  21. clear: both;
  22. }
  23. /* Responsive columns */
  24. @mediascreen and(max - width: 600 px) {
  25. .column {
  26. width: 100 % ;
  27. display: block;
  28. margin - bottom: 20 px;
  29. }
  30. }
  31. /* Style the counter cards */
  32. .card {
  33. box - shadow: 04 px8px0rgba(0, 0, 0, 0.2);
  34. padding: 16 px;
  35. text - align: center;
  36. background - color: #f1f1f1;
  37. }
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.