Highcharts 3D Pie Chart Example

Keywords : 3D pie chart with example using higcharts, How to use higcharts to create 3D pie chart with example, Javascript higcharts 3d pie chart with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts - 3D Pie 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,
                    beta: 0
                }
            }
            var chartitle = {
                text: 'Browser market shares at a specific website, 2014'
            }
            var chartooltip = {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            }
            var chartplotoptions = {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth: 35,
                    dataLabels: {
                        enabled: true,
                        format: '{point.name}'
                    }
                }
            }
            var chartseries = [{
                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]
                ]
            }]
            $('#container').highcharts({
                chart:chartype,
                title: chartitle,
                tooltip:chartooltip,
                plotOptions: chartplotoptions,
                series: chartseries
            });
        });
    </script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Highcharts 3D Pie Chart Example

Example

Result