Highcharts Semi Circle Donut Example

Keywords : Highcharts semi circle donut chart with text center example, Configure semi circle donut chart using highcharts example, How to make semi circle donut chart using highcharts with example

Example

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Highcharts Semi circle 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/modules/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var chartype = {
                plotBackgroundColor: null,
                plotBorderWidth: 0,
                plotShadow: false
            }
            var chartitle = {
                text: 'Browser<br>shares<br>2015',
                align: 'center',
                verticalAlign: 'middle',
                y: 40
            }
            var chartooltip = {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            }
            var chartplotoptions = {
                pie: {
                    dataLabels: {
                        enabled: true,
                        distance: -50,
                        style: {
                            fontWeight: 'bold',
                            color: 'white',
                            textShadow: '0px 1px 2px black'
                        }
                    },
                    startAngle: -90,
                    endAngle: 90,
                    center: ['50%', '75%']
                }
            }
            var chartseries = [{
                type: 'pie',
                name: 'Browser share',
                innerSize: '50%',
                data: [
                    ['Firefox', 10.38],
                    ['IE', 56.33],
                    ['Chrome', 24.03],
                    ['Safari', 4.77],
                    ['Opera', 0.91],
                    {
                        name: 'Proprietary or Undetectable',
                        y: 0.2,
                        dataLabels: {
                            enabled: false
                        }
                    }
                ]
            }]
            $('#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 Semi Circle Donut Example

Example

Result