❮ Highcharts Pie Gradient Highcharts 3D Charts ❯

Highcharts 3D Donut Chart

The following example demonstrates a 3D pie chart.

We have already learned the basic configuration syntax of Highcharts in previous chapters. Now, let's look at other configurations.

Configuration

chart.options3d Configuration

The following lists the basic configurations for a 3D chart. Set the chart's type property to pie, and the options3d option can set the three-dimensional effect.

var chart = {
   type: 'pie',
   options3d: {
         enabled: true,     // Whether to display the chart in 3D; we set it to true
         alpha: 15,         // Chart view rotation angle
         beta: 15,          // Chart view rotation angle
         depth: 50,         // Total depth of the chart, default is 100
         viewDistance: 25   // Define the viewing distance of the chart
   }
};

plotOptions.pie.innerSize

plotOptions.pie.innerSize is used to draw a pie chart and determines the amount of blank space at the center of the pie.

plotOptions.pie.depth

The thickness of the 3D pie chart.

plotOptions: {
   pie: {
      innerSize: 100,
      depth: 45
   }
},

Example

Filename: highcharts_3d_donut.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-3d.js"></script> 
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {      
      type: 'pie',     
      options3d: {
         enabled: true,
         alpha: 45         
      }
   };
   var title = {
      text: 'Weekly Fruit Delivery'   
   };   
   var subtitle = {
      text: 'Highcharts 3D Donut Chart'
   };  

   var plotOptions = {
      pie: {
         innerSize: 100,
         depth: 45
      }
   };   
   var series= [{
         name: 'Delivery Amount',
         data: [
            ['Bananas', 8],
            ['Kiwi', 3],
            ['Mixed nuts', 1],
            ['Oranges', 6],
            ['Apples', 8],
            ['Pears', 4],
            ['Clementines', 4],
            ['Reddish (bag)', 1],
            ['Grapes (bunch)', 1]
         ]
   }];     

   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.subtitle = subtitle; 
   json.plotOptions = plotOptions; 
   json.series = series;   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

Try it »

The output of the above example is:

Highcharts 3D Charts

❮ Highcharts Pie Gradient Highcharts 3D Charts ❯