Radar Chart Angular 16 Example

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

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *