Highcharts semicircle donut chart
The following example demonstrates a half-circle donut chart.
In the previous chapters, we have learned the basic configuration syntax of Highcharts. Next, let's take a 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
<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: 0,
plotShadow: false
};
var title = {
text: 'Browser<br>shares',
align: 'center',
verticalAlign: 'middle',
y: 50
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
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);
});
</script>
</body>
</html>
The output of the above example is:
other extensions