Angular 11/12 Radar Chart Using ng2-Charts Tutorial Example

Radar Chart Using Charts js Example Angular 11/12 Example. We will learn step by step how to implement Radar Charts using the ng2-charts js library in the Angular 11/12 app.

This Angular tutorial is compatible with version 4+ including latest version 12, 11, 10, 9, 8 ,7, 6 & 5.

In addition, we will get comprehensive knowledge on creating radar charts using ng2-chart js Angular 11/12 version.

 

How to Implement Radar Chart Using ng2-Charts js Example Angular 11/12

We simply need to follow the given steps for implementing the Radar Chart using ng2-charts in the Angular 11/12 app:

 

  • Step 1 – Create the New Angular App
  • Step 2 – Install the Charts js Library
  • Step 3 – Add Code 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

 

Now, Let’s Learn in Detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new radar-chart-app

Step 2 : Installing the Charts js Library 

Next, just install the NPM package called ng2-charts chart.js -save for implementing the radar chart in the Angular app. Further, we can install the packages by executing the below-mentioned commands on the terminal:

npm install --save bootstrap

npm install ng2-charts chart.js –save

Afterward, we open the angular j.son file and update the code into it:

"styles": [
      "node_modules/bootstrap/dist/css/bootstrap.min.css",
      "src/styles.css"
]


Step 3: Import-Module in App.Module.ts File

Next, we visit the src/app directory and open the app.module.ts file. Thereafter, we also add the given lines into the 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: Adding the Code on View File

In the next step, we create the radar chart in the Angular app. Then, we visit the src/app/ and the app.component.html after which, we update the following code into it:

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

Step 5: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we 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: Starting the Doughnut Chart Angular App

Lastly, we reach the final step of implementation where we execute the following command on the terminal to start the radar chart in angular app:

ng serve

Conclusion

Finally, we reach the end of this tutorial where we have learned to implement the radar chart in the Angular 12 app. We have tried to explain things in quite a simple way. Hope you have understood it well. 

Thanks

Leave a Reply

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