Angular 12 Radar Chart using ng2-charts JS Tutorial

Radar chart using ng2- charts js Angular 12; In this tutorial, i am going to show you how to install ng2-chart js and create radar chart using charts js library in angular 12 app.

A radar chart is a 2D chart presenting multivariate data by giving each variable an axis and plotting the data as a polygonal shape over all axes. All axes have the same origin, and the relative position and angle of the axes are usually not informative

How to Create RADAR Chart Using ng2 -Chart JS In Angular 12

• Step 1 – Create New Angular App
• Step 2 – Install Charts JS Library
• Step 3 – Import Modules on App.Module.ts File
• Step 4 – Add Code on View File
• Step 5 – Add Code On app.Component ts File
• Step 6 – Start the Angular RADAR Chart App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install Charts JS Library

Then install NPM package called ng2-charts chart.js –save for implement radar chart in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

npm install --save bootstrap

npm install ng2-charts chart.js --save

After that, 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 Modules on App.Module.ts File

Go to 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 Code on View File

Create radar chart in angular 12 app. So, visit src/app/ and app.component.htmland update the following code into it:

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

Step 5 – Add Code On app.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into 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

Execute the following command on terminal to start angular radar chart app:

ng serve

Recommended Angular Tutorials