YouTip

# Highcharts Semicircle Donut Chart [Highcharts Pie Chart](#) The following example demonstrates a semicircle donut chart. We have already learned the basic configuration syntax of Highcharts in previous chapters. Next, let's look at other configurations. * * * ## Configuration ### series Configuration Set the `type` property of `series` to `pie`. `series.type` describes the data series type. The default value is "line". To configure the pie chart size, use the `innerSize` property and set it to `innerSize: '50%'`. var series = { type: 'pie', innerSize: '50%'}; ### Example File name: highcharts_pie_semicircle_donut.htm $(document).ready(function() { var chart = { plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false }; var title = { text: 'Browser
shares', align: 'center', verticalAlign: 'middle', y: 50 }; var tooltip = { pointFormat: '{series.name}: {point.percentage:.1f}%' }; var plotOptions = { pie: { dataLabels: { enabled: true, distance: -50, style: { fontWeight: 'bold', color: 'white', textShadow: '0px 1px 2px black' } }, startAngle: -90, endAngle: 90, center: ['50%', '75%'] } }; var series= [{ type: 'pie', name: 'Browser share', innerSize: '50%', data: [ ['Firefox', 45.0], ['IE', 26.8], ['Chrome', 12.8], ['Safari', 8.5], ['Opera', 6.2], { name: 'Others', y: 0.7, dataLabels: { enabled: false } } ] }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.series = series; json.plotOptions = plotOptions; $('#container').highcharts(json); }); [Try it »](#) The output of the above example is: [Highcharts Pie Chart](#)