Radial Bar Chart in Angular Using ApexChart

In this article, we’ll learn how to create a Radialbar Chart in Angular. But first of all, we need to know what is the Radial Bar Chart.
Radial Bar Chart: A Radial Bar Chart simply refers to a typical Bar Chart displayed on a polar coordinate system, instead of a cartesian system. It’s used to show comparisons among categories by using a circular shape.
Let’s take an example of social engagement using the radial bar chart.
To draw the chart lets start install ApexChart.


npm i apexcharts
npm i core-js
npm i ng-apexcharts

After installing module lets add a module in our app.module.ts file.

....
import { NgApexchartsModule } from "ng-apexcharts";
...
@NgModule({
imports:      [ ..., NgApexchartsModule ],
....
})



After adding a module in the app.module file we can use it in our component to draw the chart. Let’s create app.component.ts file and add import ApexChart module in module.


import {
  ApexNonAxisChartSeries,
  ApexPlotOptions,
  ApexChart,
  ApexLegend,
  ChartComponent
} from "ng-apexcharts";

Let’s assign options and the data to draw the radialbar chart. Deisplay in below full code.


import { Component, VERSION ,ViewChild,OnInit } from '@angular/core';

import {
  ApexNonAxisChartSeries,
  ApexPlotOptions,
  ApexChart,
  ApexLegend,
  ChartComponent
} from "ng-apexcharts";

export type ChartOptions = {
  series: ApexNonAxisChartSeries;
  chart: ApexChart;
  labels: string[];
  colors: string[];
  legend: ApexLegend;
  plotOptions: ApexPlotOptions;
  
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  implements OnInit{

 @ViewChild("chart") chart: ChartComponent;
  public chartOptions: Partial;


  constructor() {

    
}

  ngOnInit(){
    this.chartOptions = {
      series: [76, 67, 61, 40,80],
      chart: {
        height: 390,
        type: "radialBar",
        toolbar: {
        show: true
        },
      },
      plotOptions: {
        radialBar: {
          offsetY: 0,
          startAngle: 0,
          endAngle: 270,
          hollow: {
            margin: 5,
            size: "30%",
            background: "transparent",
            image: undefined
          },
          dataLabels: {
            name: {
              show: false
            },
            value: {
              show: false
            }
          }
        }
      },
      colors: ["#e60023", "#39539E", "#0077B5", "#1da1f2","#ff0000"],
      labels: ["Pinterest", "Facebook", "LinkedIn", "Twitter","YouTube"],
      legend: {
        show: true,
        floating: true,
        fontSize: "16px",
        position: "left",
        offsetX: 50,
        offsetY: 10,
        labels: {
          useSeriesColors: true
        },
        formatter: function(seriesName, opts) {
          return seriesName + ":  " + opts.w.globals.series[opts.seriesIndex];
        },
        itemMargin: {
          horizontal: 3
        }
      }
    };
  }

 
}


<h1 style="text-align:center">RadialBar </h1>
<div id="chart">
<apx-chart
    [series]="chartOptions.series"
    [chart]="chartOptions.chart"
    [plotOptions]="chartOptions.plotOptions"
    [labels]="chartOptions.labels"
    [legend]="chartOptions.legend"
    [colors]="chartOptions.colors"
    
  ></apx-chart>
</div>




Below is the full embeded code for the RadialBar Chart using ApexChart you can easily used in your application.
Example

Spread the love
  •  
  •  
  •  
  •  
  • 1
  •  
  •  
  •  

No Responses