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

Education For Betterment

Radial Bar Chart in Angular Using ApexChart

About The Author

Jugal Rana

No Responses

Related Posts

About The Author

No Responses