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


Jaspreet Singh Ghuman

Jaspreet Singh Ghuman


Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

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
Item added to cart.
0 items - 0.00