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": [

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';
  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

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';
  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.


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

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Jassweb, Rai Chak, Punjab, India. 143518
Open chat
Scan the code
Hello 👋
Can we help you?