Doughnut & Radar Charts in Angular

In my last article we discuss on how to implement Bar & Pie chart in angular.In these article we discuss on how to implement Doughnut & Radar chart in our angular Application.

Doughnut Chart
Doughnut charts show each cell’s data as a slice of a doughnut in chart. Doughnut chart may contain one or more doughnuts arranged one inside another one.

Basic example of Doughnut Chart the full code display below also embedded full code.
In our basic example shows employees age year wise using Doughnut Chart.


import { Component } from '@angular/core';
 
@Component({
  selector: 'doughnut',
  templateUrl: './doughnut.html'
})
export class DoughnutChartComponent {
  // Doughnut
  public doughnutChartLabels:string[] = ['Age 18 to 24', 'Age 25 to 35', 'Above 35+'];
  public demodoughnutChartData:number[] = [[350, 450, 100],[250, 350, 150]];
  public doughnutChartType:string = 'doughnut';
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
}


<h3 style="text-align:center">Company A Employes in 2017 & 2018</h3>

<div style="display: block">
  <canvas baseChart
              [data]="demodoughnutChartData"
              [labels]="doughnutChartLabels"
              [chartType]="doughnutChartType"
              (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)"></canvas>
</div>

Radar Chart
Radar Chart also known as Spider chart or polar chart.
Radar chart is a graphical method of display multivariate data in to two-dimensional chart of three or more quantitative variables represented on axes starting from the same point.

Basic example of the Radar chart full code display below also embedded full code.
In our basic example shows Company A & Company B Employees in Software company using Radar Chart.


import { Component } from '@angular/core';
 
@Component({
  selector: 'radar',
  templateUrl: './radar.html'
})
export class RadarChartComponent {
  // Radar
  public demoradarChartLabels:string[] = ['Designer', 'Developer', 'Tester', 'Clients', 'HR'];
 
  public demoradarChartData:any = [
    {data: [20, 40, 15, 30, 12], label: 'Company A'},
    {data: [30, 40, 20, 35, 15], label: 'Company B'}
  ];
  public radarChartType:string = 'radar';
 
  // events
  public chartClicked(e:any):void {
    console.log(e);
  }
 
  public chartHovered(e:any):void {
    console.log(e);
  }
}


<h3 style="text-align:center;">Radar Chart</h3>
<div style="display: block">
  <canvas baseChart
          [datasets]="demoradarChartData"
          [labels]="demoradarChartLabels"
          [chartType]="radarChartType"
          (chartHover)="chartHovered($event)"
          (chartClick)="chartClicked($event)"></canvas>
</div>

Spread the love

Education For Betterment

About The Author

Jugal Rana

Related Posts

About The Author