Home
3D Pie and Donut Chart in Angular using Highchart

3D Pie and Donut Chart in Angular using Highchart

July 28, 2020 Angular 10+, Angular2+ No Comments

In this article, we saw how to draw 3d charts in angular using HighChart. We already discuss on how to create a simple pie chart and donut chart. In this article we draw the same chart but in 3d dimensions. For the pie, chart lets take a sample example we used browser stack over a year.
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 percentage in json format to draw the data. For 3D chart option enable we need to import “highcharts-3d” in our component. How to import “highcharts-3d” modules display in below code.


import highcharts3D from 'highcharts/highcharts-3d';
highcharts3D(Highcharts);


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



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

import Histogram from 'highcharts/modules/histogram-bellcurve';
Histogram(Highcharts);

import highcharts3D from 'highcharts/highcharts-3d';
highcharts3D(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);
import * as newdata from './data';

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


  public activity;
  public xData;
  public label;
  options:any;

   
  constructor() {
 

    this.options = {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: 'Browser market shares'
    },
    accessibility: {
        point: {
            valueSuffix: '%'
        }
    },
    tooltip: {
        pointFormat: '{series.name}: {point.percentage:.1f}%'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [
            ['Chrome', 45.0],
            ['IE', 26.8],
            {
                name: 'Firefox',
                y: 12.8,
                sliced: true,
                selected: true
            },
            ['Safari', 8.5],
            ['Opera', 6.2],
            ['Others', 0.7]
        ]
    }]
};
}

  ngOnInit(){

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



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


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



Below is code for the 3d donut chart.


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

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

import Histogram from 'highcharts/modules/histogram-bellcurve';
Histogram(Highcharts);

import highcharts3D from 'highcharts/highcharts-3d';
highcharts3D(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);
import * as newdata from './data';

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


  public activity;
  public xData;
  public label;
  options:any;

   
  constructor() {
 

    this.options = {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45
        }
    },
    title: {
        text: 'Weekly fruit delivery'
    },
    subtitle: {
        text: ''
    },
    plotOptions: {
        pie: {
            innerSize: 100,
            depth: 45
        }
    },
    series: [{
        name: 'Delivered amount',
        data: [
            ['Bananas', 8],
            ['Kiwi', 3],
            ['Mixed nuts', 1],
            ['Oranges', 6],
            ['Apples', 8],
            ['Pears', 4],
            ['Clementines', 4],
            ['Reddish (bag)', 1],
            ['Grapes (bunch)', 1]
        ]
    }]
};
}

  ngOnInit(){

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



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


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

Spread the love
  •  
  •  
  •  
  •  
  • 6
  • 2
  •  
  •  

Related Posts

About The Author

Jugal Rana