This tutorial help to implement chart.js into angular 13 application. The Chart is a graphical representation of data, in which “the data is represented by symbols like line, bar slices etc”.I will demonstrate bar chart integration with angular 13, But you can implement any chart type option Like pie, radar, line, doughnut and bubble charts with this angular 13.
I have already shared tutorial Angular 13 Chart Tutorial using Chart.js.
What is Chart.js?
Chart.Js is a popular and powerful JavaScript chart library, It is used HTML5 canvas to represent the data a pictorial manner. You can pass the data in JSON format. It allows us to build dynamic as well as static charts with animation.
What is ng2-charts
The ng2-charts npm module is an open-source JavaScript library that is created over chart.js.It’s an angular 2+ wrapper libs for chart.js.
The ng2-charts allow 8 types of charts with it, such as: pie, bar, line, radar, polar area, doughnut, bubble and scatter.
ng2-chart Properties
These properties are the same as chart.js core library defined in the documentation, They are just extending those properties and used in the 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 type events available into ng2-chart libs, You can catch click and hover events of any chart.
- chartClick: This event triggered, when user has been click on a chart.This method returns information regarding active points and labels.
- chartHover: This event triggered, when mousemove (hover) on a chart has occurred. This method returns information regarding active points and labels.
Bar Chart Example Using ng2-charts
A bar chart is a popular chart option to create graphical representation of the data.You can represent data in rectangular bars and display values that are proportionate to the heights or length of the values defined.
Set up Angular Project
Install and set up Angular project by running the following command.
ng new ng-charts-app # Would you like to add Angular routing? # Select y and Hit Enter. # Which stylesheet format would you like to use? (Use arrow keys) # Choose CSS and hit Enter
Next, get inside the project folder.
cd ng-charts-app
How To install dependencies
Now, I’ll install ng2-charts and Chart js libraries via npm in the Angular 13 project. We will use ng2-charts along with the Chart js library in our Angular application to show the various charts.
npm install ng2-charts chart.js --save
The above command will install both the packages and save the entries inside the package.json file.
Next, import ChartsModule into the app.module.ts file.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
ChartsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Go to app.component.ts file and add the given below code.
<div class="app-root"> <div class="container"> <div class="col-sm-4 text-center" style="width: 500px; height: 600px;"> <h2 class="text-center">Bar chart using Chartjs and Angular 13</h2> <canvas> </canvas></div> </div> </div>
Run Angular 13 Application
Let’s run an angular application using the below command –ng serve
Open development server http://localhost:4200 on browse, Your result must look like this:
Click on the below button to get the full code from my GitHub repo:
Conclusion
I have integrated the Bar chart with Angular 13 through ng2-charts. The chart.js and ng2-charts are very easy to integrate into an Angular app. I hope it will help you to show various data using given chart.js.
