Donut Chart in Angular Using HighChart

In the last article, we discuss how to create a pie chart in angular using highChart with examples of browser uses over time. In this article, we discuss the donut chart on how to create a donut chart in Angular using Highchart.
Donut: A donut chart is essentially a Pie Chart with more informations. Doughnut charts show each cell’s data as a slice(section) of a doughnut. The chart may contain one or more doughnuts, arranged one inside the other. Doughnut charts let you show the relationship of parts of several sets of data. In over Browser uses example let’s add more series Which version has used more on the browser.
For drawing the chart First, we need to install High chart node modules in our application.


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’;” then assign options and values to the chart in this chart we need to chart type as “Pie” and adding series data we need to pass the browser name and their each version has how much use with add the pertage uses of that version.Disply 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 colors = Highcharts.getOptions().colors;

  public categories = [
        'Chrome',
        'Firefox',
        'Internet Explorer',
        'Safari',
        'Edge',
        'Opera',
        'Other'
    ];
    public data = [
        {
            y: 62.74,
            color: this.colors[2],
            drilldown: {
                name: 'Chrome',
                categories: [
                    'Chrome v65.0',
                    'Chrome v64.0',
                    'Chrome v63.0',
                    'Chrome v62.0',
                    'Chrome v61.0',
                    'Chrome v60.0',
                    'Chrome v59.0',
                    'Chrome v58.0',
                    'Chrome v57.0',
                    'Chrome v56.0',
                    'Chrome v55.0',
                    'Chrome v54.0',
                    'Chrome v51.0',
                    'Chrome v49.0',
                    'Chrome v48.0',
                    'Chrome v47.0',
                    'Chrome v43.0',
                    'Chrome v29.0'
                ],
                data: [
                    0.1,
                    1.3,
                    53.02,
                    1.4,
                    0.88,
                    0.56,
                    0.45,
                    0.49,
                    0.32,
                    0.29,
                    0.79,
                    0.18,
                    0.13,
                    2.16,
                    0.13,
                    0.11,
                    0.17,
                    0.26
                ]
            }
        },
        {
            y: 10.57,
            color: this.colors[1],
            drilldown: {
                name: 'Firefox',
                categories: [
                    'Firefox v58.0',
                    'Firefox v57.0',
                    'Firefox v56.0',
                    'Firefox v55.0',
                    'Firefox v54.0',
                    'Firefox v52.0',
                    'Firefox v51.0',
                    'Firefox v50.0',
                    'Firefox v48.0',
                    'Firefox v47.0'
                ],
                data: [
                    1.02,
                    7.36,
                    0.35,
                    0.11,
                    0.1,
                    0.95,
                    0.15,
                    0.1,
                    0.31,
                    0.12
                ]
            }
        },
        {
            y: 7.23,
            color: this.colors[0],
            drilldown: {
                name: 'Internet Explorer',
                categories: [
                    'Internet Explorer v11.0',
                    'Internet Explorer v10.0',
                    'Internet Explorer v9.0',
                    'Internet Explorer v8.0'
                ],
                data: [
                    6.2,
                    0.29,
                    0.27,
                    0.47
                ]
            }
        },
        {
            y: 5.58,
            color: this.colors[3],
            drilldown: {
                name: 'Safari',
                categories: [
                    'Safari v11.0',
                    'Safari v10.1',
                    'Safari v10.0',
                    'Safari v9.1',
                    'Safari v9.0',
                    'Safari v5.1'
                ],
                data: [
                    3.39,
                    0.96,
                    0.36,
                    0.54,
                    0.13,
                    0.2
                ]
            }
        },
        {
            y: 4.02,
            color: this.colors[5],
            drilldown: {
                name: 'Edge',
                categories: [
                    'Edge v16',
                    'Edge v15',
                    'Edge v14',
                    'Edge v13'
                ],
                data: [
                    2.6,
                    0.92,
                    0.4,
                    0.1
                ]
            }
        },
        {
            y: 1.92,
            color: this.colors[4],
            drilldown: {
                name: 'Opera',
                categories: [
                    'Opera v50.0',
                    'Opera v49.0',
                    'Opera v12.1'
                ],
                data: [
                    0.96,
                    0.82,
                    0.14
                ]
            }
        },
        {
            y: 7.62,
            color: this.colors[6],
            drilldown: {
                name: 'Other',
                categories: [
                    'Other'
                ],
                data: [
                    7.62
                ]
            }
        }
    ];
    browserData = [];
    versionsData = [];
  
   // dataLen = this.data.length;
    drillDataLen:any;
    brightness:any;
  options:any;


  constructor() { 
    for (let i = 0; i < this.data.length; i += 1) {

    // add browser data
    this.browserData.push({
        name: this.categories[i],
        y: this.data[i].y,
        color: this.data[i].color
    });

    // add version data
    this.drillDataLen = this.data[i].drilldown.data.length;
    for (let j = 0; j < this.drillDataLen; j += 1) {
        this.brightness = 0.2 - (j / this.drillDataLen) / 5;
        this.versionsData.push({
            name: this.data[i].drilldown.categories[j],
            y: this.data[i].drilldown.data[j],
            color: Highcharts.color(this.data[i].color).brighten(this.brightness).get()
        });
    }
}


this.options = {
    chart: {
      
        type: 'pie'
    },
    title: {
        text: 'Browser market shares'
    },
  
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    plotOptions: {
        pie: {
            shadow: false,
            center: ['50%', '50%']
        }
    },
    tooltip: {
        valueSuffix: '%'
    },
    series: [{
        name: 'Browsers',
        data: this.browserData,
        size: '60%',
        dataLabels: {
            formatter: function () {
                return this.y > 5 ? this.point.name : null;
            },
            color: '#ffffff',
            distance: -30
        }
    }, {
        name: 'Versions',
        data: this.versionsData,
        size: '80%',
        innerSize: '60%',
        dataLabels: {
            formatter: function () {
                // display only if larger than 1
                return this.y > 1 ? '' + this.point.name + ': ' +
                    this.y + '%' : null;
            }
        },
        id: 'versions'
    }]
  }

  }

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


<h1 style="text-align:center">Donut Chart using HighChart</h1>
<div id="container"></div>




Below is the full embeded code for the donut chart using Highchart you can easily used in your application.

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