Donut chart using Highcharts in Angular 6


Photo by Kenny Timmer on Unsplash
Photo by Kenny Timmer on Unsplash

Quick view

Here is the link to stackblitz working demo

TLDR;

I didn't found a satisfied answer when I typed "Donut chart using Highcharts", so I made one.

Highcharts are beautiful. In this short tutorial, you will learn to integrate Highcharts in your Angular app and make a donut chart out of it.


Step 1 : Install Highcharts using npm

Run command given below from project root.

npm i --save angular-highcharts highcharts

That installed "highcharts": "^7.2.0" and "angular-highcharts": "^8.0.3" for me. Check your version if you face any issue after completing this tutorial.


Step 2: Add highcharts in app.module.ts

Every library you use in Angular has to be imported in app.module.ts as a module. After installing, its time to import highcharts and angular-highcharts.

  • Add import { ChartModule } from 'angular-highcharts'; at top in app.module.ts.
  • Add ChartModule in Imports


Step 3: Add highcharts in chart.component.ts

Your component might be different if you are an Angular elite. If you are not, generate new component using following command:

ng g component chart

This will create new angular component named chart.component in your project. Now edit the chart.component.ts file or just replace component code with the following code snippet:

import { Component, OnInit } from '@angular/core'; import { Chart } from 'angular-highcharts'; @Component({ selector: 'app-chart', templateUrl: './chart.component.html', styleUrls: ['./chart.component.scss'] }) export class ChartComponent implements OnInit { donutChart: Chart; constructor() { } initDonut() { const donut = new Chart({ chart: { plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false }, title: { text: '<strong>1137<br>streams</strong>', align: 'center', verticalAlign: 'middle', y: 0 }, tooltip: { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }, credits: { enabled: false }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: true, distance: -50, style: { fontWeight: 'bold', color: 'white' } }, startAngle: -90, endAngle: -180, center: ['50%', '50%'], size: '90%', showInLegend: true } }, series: [ { name: 'Browsers', data: [ { name: 'Chrome', y: 61.41 }, { name: 'Internet Explorer', y: 11.84, }, { name: 'Firefox', y: 10.85, }, { name: 'Edge', y: 4.67 }, { name: 'Safari', y: 4.18 }], type: 'pie', innerSize: '50%', }] }); this.donutChart = donut; } ngOnInit() { this.initDonut(); } }
Explanation for above code
  • We imported Chart module from angular-highcharts to use its object within initDonut()
  • initDonut() function conatins donut chart options. If you have used highcharts with jQuery, you might be familiar with what is written. Everything in this function is just options for setting up styling and data for your donut chart which you can see on highcharts documentation page also, except for const donut = new Chart({

    const donut = new Chart({ is creating new object using Chart object for highcharts options. You can pass any other highcharts options for line chart or pie chart as well.

  • donutChart: Chart was for removing an error. So basically if you will use just donut, compiler throws error as it does not understand if property series or type is available in options. hence we created an object for chart options and another for Chart instantiation.
  • Within ngOnInit, this.initDonut(); calls the function for Chart instantiation.



Step 3: Add highcharts in chart.component.html

Copy the followingHTML in you chart.component.html :

<div style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto" [chart]="donutChart"></div>

See the [chart]="donutChart"! That means we are passing object created in our chart.component.ts file to chart directive.

How it looks

As seen on stackblitz
As seen on stackblitz



References:

Thanks for reading

Sudheer — listens to SoundCloud, Strings being his favourite band, learns stuff to make life easier.