Highcharts 3D Pie 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 configuration for 3D charts. 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, // Display whether the chart is set to 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
}
};
Example
Filename: highcharts_3d_pie.htm
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts Tutorial | tutorialpro.org(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,
beta: 0
}
};
var title = {
text: '2014 Browser Market Share'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: 35,
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
};
var series= [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.plotOptions = plotOptions;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
The above example outputs the following result: