YouTipHighcharts 3D Donut
# Highcharts 3D Donut Chart
[Highcharts 3D Charts](#)
The following example demonstrates a 3D pie chart.
We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, 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`. The `options3d` option can be used to set the 3D effect.
```javascript
var chart = {
type: 'pie',
options3d: {
enabled: true, // Whether to enable 3D display for the chart, 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 // Defines the viewing distance of the chart
}
};
### plotOptions.pie.innerSize
`plotOptions.pie.innerSize` is used to set the size of the blank space in the center when drawing a pie chart.
### plotOptions.pie.depth
The thickness of the 3D pie chart.
```javascript
plotOptions: {
pie: {
innerSize: 100,
depth: 45
}
},
### Example
Filename: `highcharts_3d_donut.htm`
$(document).ready(function() {
var chart = {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
};
var title = {
text: 'Weekly Fruit Delivery Volume'
};
var subtitle = {
text: 'Highcharts 3D Donut Chart'
};
var plotOptions = {
pie: {
innerSize: 100,
depth: 45
}
};
var series = [{
name: 'Delivery Volume',
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);
});
[Try it »](#)
The output of the above example is:
[Highcharts 3D Charts](#)
[](#)(#)
(#)[](#)
[Volcengine Coding Plan supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied and stable. Configuration Guide ¥9.9/month Subscribe Now](https://maas.xfyun.cn/modelSquare?ch=maas_lm_l2E)