How to generate ChartJS polar area chart in Angular

Angular is a TypeScript-based free, open-source framework developed by Google. It allows its users to develop front-ends of mobile and web applications. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. It also supports multiple libraries and encourages component-based architecture.

One of these libraries is ChartJS. ChartJS is a free, open-source JavaScript library. Its primary purpose is for data visualization in the form of multiple charts. These include line, bar, pie, scatter, and many more. It also provides the user with animation capabilities on its charts, such as pop-ups and more. It is written in pure JavaScript and is entirely independent of other libraries.

Setting up Angular

Before starting the Angular setup, we must have Node.js and NPM (or Yarn) package manager. To install these, visit the official website for NPM and download the version compatible with our machine.

Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.

  1. First, We will open our terminal and enter the command below to install our Angular CLI.

npm install -g @angular/cli
Install Angular CLI
  1. Now, we can create our Angular application by entering the command below, where we can replace polarareaApp with any name we like. After we enter this, we need to enable routing and select CSS as our style.

ng new polarareaApp
Create Angular application
  1. To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.

  2. Now run the following commands inside the newly created folder. The first command will build the code and generate multiple bundles for differential loading. The second command bundles our code with Webpack so that every change we make will be reflected on the browser. This will open our local page for our Angular application at the default port of "http://localhost:4200".

ng build polarareaApp
ng serve polarareaApp
Bundle code
  1. We will open another terminal and install ChartJs by entering the following command.

npm install chart.js
Install ChartJS
  1. Let us now create the component for our chart. To do so, use the following command.

ng generate component polararea
Generate component

Everything is set up now. The next step will be to add data to our chart elements and components.

Creating a polar area chart

Now that we have our components let us add the data in the specific files.

  1. First, we will open our "polararea.components.html" file. In it, we will paste the following code.

<div class="chart-container">
<canvas id="MyChart" >{{ chart }}</canvas>
</div>
Create char container
  1. Now, we will open our "polararea.components.ts" file. Here we will import charts.js and create two class functions. We will also declare our chart variable as public. The first function will be a ngOnInit function that runs when the class's constructor is called. This function will contain a function call to our second function. The second function called createChart will create the chart that we require.

import Chart from 'chart.js/auto';
// rest of the code
export class PolarareaComponent implements OnInit {
constructor() { }
ngOnInit(): void {
this.createChart();
}
public chart: any;
createChart(){
this.chart = new Chart("MyChart", {
type: 'polarArea',
data: {// values on X-Axis
labels: [],
datasets: [
{ label: "", data: [''],},
{ label: "", data: [''],}]
},
options: { aspectRatio:2.5}
});}}
  1. Lastly, we need to add the HTML selector of our bar chart to the "app.component.html" file.

<app-polararea></app-polararea>
Set HTML selector

We have finished creating our polar area chart. Now, we can visit the local host page and see our plot. We have given a running version of the chart application below for convenience.

{
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
  "recommendations": ["angular.ng-template"]
}
Example polar area chart

Note: Data was taken from the Pakistan Bureau of Statistics.

Conclusion

ChartJs allows users to display data in a way that allows it to be interactive and visually appealing. Moreover, the ease of use and seamless integration with Angular makes it a popular choice for developers. Moreover, the extensive documentation at ChartJs creates an easy learning experience and encourages others to jump in. ChartJs is a robust library for those needing data visualization as it provides as is required, and it does so in an organized, fast, and presentable manner.

Copyright ©2024 Educative, Inc. All rights reserved