Polar chart in Angular using HighChart

In this article, we’ll learn how to create a Polar Chart in Angular. But first of all, we need to know what is the Polar Chart.

Polar Chart: According to Wikipedia, The polar chart is a graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. Polar charts, also known as a radar chart. The relative position and angle of the axes are typically uninformative, but various heuristics, such as algorithms that plot data as the maximal total area, can be applied to sort the variables (axes) into relative positions that reveal distinct correlations, trade-offs, and a multitude of other comparative measures. Let’s draw the Polar chart for that first we need to install highchair in our applications


npm install highcharts --save
npm install highcharts-angular --save

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

....
import { HighchartsChartModule } from 'highcharts-angular';
...
@NgModule({
imports:      [ ..., HighchartsChartModule],
....
})



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 highchat module using “import * as Highcharts from ‘highcharts’;“. We need to assign xAxis,yAxis,series data to draw the chart display in below code.


import { Component, VERSION ,OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;
const More = require('highcharts/highcharts-more');
More(Highcharts);

const Exporting = require('highcharts/modules/exporting');
Exporting(Highcharts);

const ExportData = require('highcharts/modules/export-data');
ExportData(Highcharts);

const Accessibility = require('highcharts/modules/accessibility');
Accessibility(Highcharts);

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

   public options: any = {

    chart: {
        polar: true
    },

    title: {
        text: 'Polar Chart'
    },

    subtitle: {
        text: 'Also known as Radar Chart'
    },

    pane: {
        startAngle: 0,
        endAngle: 360
    },

    xAxis: {
        tickInterval: 45,
        min: 0,
        max: 360,
        labels: {
            format: '{value}°'
        }
    },

    yAxis: {
        min: 0 
    },

    plotOptions: {
        series: {
            pointStart: 0,
            pointInterval: 45
        },
        column: {
            pointPadding: 0,
            groupPadding: 0
        }
    },

    series: [{
        type: 'column',
        name: 'Column',
        data: [11,8,10, 7, 6, 5, 4, 3, 2, 1],
        pointPlacement: 'between'
    }, {
        type: 'line',
        name: 'Line',
        data: [1, 2, 3, 4, 5, 6, 7, 8,10]
    }, {
        type: 'area',
        name: 'Area',
        data: [1, 6, 2, 7, 3, 8, 4, 5,9]
    }]

   };

  

  constructor() { }

  ngOnInit(){
    Highcharts.chart('container', this.options);
  }
}


<h1 style="text-align:center">Polar Chart in Angular</h1>
<div id="container"></div>




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

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

No Responses