Angular 13 Chart Tutorial using Chart.js

This is another angular 13 tutorial. This tutorial help to integrate chart.js with angular 13 and create Pie Chart. I will explore Chart.js implementation with Angular 13. The chart.js is the most popular charting library. I will create a PIE chart demonstration from scratch using angular 13.

I am assuming, You have installed nodejs > 10 and npm >6, if not please install it into your system. I am using the latest angular CLI which is angular 13.

Chartjs is a very popular JavaScript charting library that are using HTML5 elements like canvas elements to display charts. You can create static/dynamic charts with animation using chart.js, Since It’s using json data so it can be integrated with any backend programming language.

You can download the latest version of Chart.js.You can also use Chart.js CDN links.

Ng2-chart

This is open source chart library for angular 2+, You can use this lib with any angular 4/6/9/13 version. There are number of directive available for each type chart, which are supported by chart.js library.

The base-chart directive use for all types chart but there are mainly 13 types charts directive available:

line
bar
radar
pie
polarArea
doughnut

ng2-chart Properties

These properties are same as chart.js core library defined in documentation, they are just extending those properties and used into directive.

data (Array<number[]> | number[])</number[]> – set of points of the chart, it should be Array<number[]> only for line, bar and radar, otherwise number[].</number[]>
datasets (Array<{data: Array<number[]> | number[], label: string}>)</number[]> – data see about, the label for the dataset which appears in the legend and tooltips.
labels (?Array) – x axis labels. It’s necessary for charts: line, bar and radar. And just labels (on hover) for charts: polarArea, pie and doughnut.
chartType (?string) – indicates the type of charts, it can be: line, bar, radar, pie, polarArea, doughnut.
options (?any) – chart options (as from Chart.js documentation).
colors (?Array) – data colors, will use default and|or random colors if not specified (see below).
legend: (?boolean=false) – if true show legend below the chart, otherwise not be shown.

ng2-chart Events

There are two types of events available in ng2-chart libs, You can catch click and hover events on any chart.

chartClick: This event is triggered when the user has clicked on a chart.This method returns information regarding active points and labels.
chartHover: This event is triggered when mousemove (hover) on a chart has occurred. This method returns information regarding active points and labels.

Checkout Other Angular Charts tutorials,

Simple Chart.js Example using Angular 13

Let’s create an angular 13 application using angular cli , The name of application is chartjs-example-angular13, I am creating angular 13 application using below command:
ng new chartjs-example-angular13

Added Chart.js Dependency in Angular 13

ng2-chart is third-party libs, that are providing chartjs directive. We will use this angular libs and use it in our application. It’s too easy and simple to integrate in angular 13 applicatio. Let’s, add chartjs, ng2-chart and bootstrap as dependency packages. You can skip bootstrap package, if you don’t want to use into your angular 13 application:

npm install ng2-charts --save
npm install chart.js --save
npm install bootstrap --save

Above command will download all packages and '--save' option help to save entry into package.json file.

We will add chart.js and bootstrap package reference into index.html file. You can make entry into angular.json file as well, if you don’t want add into index.html file.

<script src="node_modules/chart.js/src/chart.js"></script>

We will import module into angular 13 application, Open app.module.ts file and import chart module.

import { ChartsModule } from 'ng2-charts/ng2-charts';

// In your App's module:
imports: [
   ChartsModule
]

We are creating PIE chart, So we will define data for that using angular variable, Open app.components.ts file and defined all variables.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public pieChartLabels:string[] = ["Pending", "InProgress", "OnHold", "Complete", "Cancelled"];
  public pieChartData:number[] = [21, 39, 10, 14, 16];
  public pieChartType:string = 'pie';
  public pieChartOptions:any = {'backgroundColor': [
               "#FF6384",
            "#4BC0C0",
            "#FFCE56",
            "#E7E9ED",
            "#36A2EB"
            ]}
 
  // events on slice click
  public chartClicked(e:any):void {
    console.log(e);
  }
 
 // event on pie chart slice hover
  public chartHovered(e:any):void {
    console.log(e);
  }
}

The pieChartLabels is used to define PIE chart labels, The pieChartData array used for label values, pieChartType variable contains the type of chart and pieChartOptions is used to add options for the chart.

Now, add the above angular variables into the component HTML view file, We will add the below code into app.component.html file.

<div class="container">
<div class="col-sm-4 text-center">
<h2 class="text-center">PIE chart using Chartjs and Angular 13</h2>
<canvas></canvas></div>
</div>

Finally, You have implemented chart.js PIE chart with in angular 13, run the below command to view angular 6 app.

c:/chartjs-example-angular13>ng serve

Now open https://localhost:4200 the browser, You can see pie chart.