Code for Donut Chart in HighCharts
var colors = Highcharts.getOptions().colors;
// Create the chart
Highcharts.chart("container", {
chart: {
type: "pie"
},
title: {
text: "Browser market share, January, 2017 to December, 2017"
},
subtitle: {
text: 'Browser market share, January, 2017 to December, 2017'
},
yAxis: {
title: {
text: "Total percent market share"
}
},
tooltip: {
valueSuffix: "%"
},
series: [
{
name: "Browsers",
data: [
{
name: "MSIE",
y: 10,
color: colors[0]
},
{
name: "Firefox",
y: 25,
color: colors[1]
},{
name: "Chrome",
y: 65,
color: colors[2],
}
],
size: "60%",
},
{
name: "Versions",
data: [
{ name: "MSIE 6.0", y: 0.5, color: colors[0] },
{ name: "MSIE 7.0", y: 1.5, color: colors[0] },
{ name: "MSIE 8.0", y: 2, color: colors[0] },
{ name: "MSIE 9.0", y: 2, color: colors[0] },
{ name: "MSIE 10.0", y: 2, color: colors[0] },
{ name: "MSIE 11.0", y: 2, color: colors[0] },
{ name: "Firefox v31", y: 1, color: colors[1] },
{ name: "Firefox v32", y: 1, color: colors[1] },
{ name: "Firefox v33", y: 2, color: colors[1] },
{ name: "Firefox v35", y: 3, color: colors[1] },
{ name: "Firefox v36", y: 6, color: colors[1] },
{ name: "Firefox v37", y: 4, color: colors[1] },
{ name: "Firefox v38", y: 6, color: colors[1] },
{ name: "Chrome v38.0", y: 6, color: colors[2] },
{ name: "Chrome v39.0", y: 4, color: colors[2] },
{ name: "Chrome v40.0", y: 5, color: colors[2] },
{ name: "Chrome v41.0", y: 5, color: colors[2] },
{ name: "Chrome v42.0", y: 20, color: colors[2] },
{ name: "Chrome v43.0", y: 25, color: colors[2] }
],
size: "80%",
innerSize: "60%"
}
]
});