Highcharts donut chart without inner pie?
**I hope this example of highchat will solve your problum
http://jsfiddle.net/e2qpa/3/
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: [
['Firefox', 44.2],
['IE7', 26.6],
['IE6', 20],
['Chrome', 3.1],
['Other', 5.4]
]}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
You just need to provide the data as an array of two element (key / value) arrays. Specify an innerSize
to get the donut style.
So your parameters will contain something like this:
...
data: [["Firefox",6],["MSIE",4],["Chrome",7]],
innerSize: '20%',
...
Here's a jsFiddle of a complete example.