Radar Chart Angular 16 Example

A radar chart, also known as a spider chart or web chart, is a graphical representation that displays data on a two-dimensional plane with multiple axes originating from a common center point. This type of chart is often used to visualize and compare the performance or characteristics of different categories across various quantitative variables. Each axis represents a specific data attribute, and the data points are plotted along these axes to form a shape resembling a spider’s web or a star.

Radar chart in angular 16; In this tutorial, you will learn how to integrate Chart.js to create the radar chart in angular 16 projects or apps.

Angular 16 Radar Chart Example Tutorial

Steps to create a radar chart in angular 16 project using charts. js library:

• Step 1 – Set up the Angular project
• Step 2 – Install Chart.js
• Step 3 – Import Required Modules
• Step 4 – Add the Chart in the Component Template
• Step 5 – Import Components in Component ts File
• Step 6 – Start the Angular RADAR Chart App

Step 1 – Set up the Angular project

First of all, open your cmd or command prompt and execute the following command into it to install and create new angular project using cli:

ng new my-new-app

Step 2 – Install Chart.js

Next, execute the following npm command on cmd to install NPM ng2-charts chart.js and install bootstrap in your angular project:

npm install --save bootstrap

npm install ng2-charts chart.js --save

Once you have installed charts.js in your angular project. Now you need to open angular.json file and update the following code into it:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]

Step 3 – Import Required Modules

Next, you need to import some required module. So, visit src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
  
import { AppComponent } from './app.component';
import { ChartsModule } from 'ng2-charts';
  
@NgModule({
  imports:      [ BrowserModule, FormsModule, ChartsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4 – Add the Chart in the Component Template

Now, you need to add radar chart to angular project. So, visit src/app/ and app.component.html and update the following code into it:

<h1>Angular radar chart example - Tutsmake.com</h1>
  
<div style="display: block;">
  <canvas baseChart
    [datasets]="radarChartData"
    [options]="radarChartOptions"
    [labels]="radarChartLabels"
    [chartType]="radarChartType">
  </canvas>
</div>

Step 5 – Import Components in Component ts File

Next, import the component in the component.ts file. So, you need to visit the src/app directory and open app.component.ts. Then add the following code into the component.ts file:

import { Component, OnInit } from '@angular/core';
import { ChartDataSets, ChartType, RadialChartOptions } from 'chart.js';
import { Label } from 'ng2-charts';
  
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  
  public radarChartOptions: RadialChartOptions = {
    responsive: true,
  };
  public radarChartLabels: Label[] = ['PHP', '.Net', 'Java', 'Android', 'Node.JS'];
  
  public radarChartData: ChartDataSets[] = [
    { data: [62, 59, 80, 81, 56], label: 'Uses' },
    { data: [30, 48, 50, 29, 80], label: 'Popular' }
  ];
  public radarChartType: ChartType = 'radar';
  
  constructor() { }
  
  ngOnInit() {
  }
}

Step 6 – Start the Angular Radar Chart App

Finally, execute the following command on cmd to start angular radar chart app:

ng serve

Visit http://localhost:4200 in your web browser, and you should see the radar chart with sample data.

Conclusion

Congratulations! You’ve successfully created a radar chart using Angular and Chart.js. You can customize the chart further by exploring the options provided by Chart.js in the official documentation (https://www.chartjs.org/docs/latest/charts/radar.html).

Recommended Angular Tutorials