Highcharts 3D Donut Chart Example

Keywords : How to build 3d donut chart using higcharts with example, Use higcharts to create 3d donut chart with example, Higcharts 3d donut chart with text-center properties example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - 3D Donut Chart</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-3d.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var chartype = {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45
                }
            }
            var chartitle = {
                text: 'Contents of Highsoft\'s weekly fruit delivery'
            }
            var chartsubtitle = {
                text: '3D donut in Highcharts'
            }
            var chartplotoptions = {
                pie: {
                    innerSize: 100,
                    depth: 45
                }
            }
            var chartseries = [{
                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]
                ]
            }]
            $('#container').highcharts({
                chart:chartype,
                title: chartitle,
                subtitle:chartsubtitle,
                plotOptions: chartplotoptions,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Highcharts 3D Donut Chart Example

Example

Result