Angular 13 Radar Chart Example Tutorial

Angular 13 radar chart; Through this tutorial, i am going to show you how to make a radar charts using the charts js library in the angular 13 app.

Angular 13 Radar Chart Example Tutorial

Follow the below given steps to build radar chart in angular 13 apps; as follows:

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

Step 1 – Create New Angular App

Run the following command on command prompt 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 apps. 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 in 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 – Create RADAR Chart in View File

Go to src/app/ and app.component.html and 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 – Import Components in 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

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

ng serve

Be First to Comment

Leave a Reply

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