score:1

I'm not sure if this is what you want: see example at jsfiddle

End angle is calculated as proportion of 45*180/100 = 81. So, end angle is at -9.

            startAngle: -90,
            endAngle: -9,
            center: ['50%', '75%']

And data is only one value:

        data: [
            ['Firefox',   45.0]
        ]

And tooltip is changed to show 45% instead of 100%

    tooltip: {
        pointFormat: '{series.name}: <b>{point.y:.1f}%</b>'
    },

Update: Used idea from @Mark to calculate endData using input data (see Mark's comment in his answer). Added also variable for startAngle. See update at jsfiddle:

var data = 45;
var startAngle = -90;
var endAngle = (data/100 * 180) + startAngle;
endAngle = endAngle == 0 ? 0.01 : endAngle;
...
            startAngle: startAngle,
            endAngle: endAngle,
...
        data: [
            ['Firefox',   data]
...

score:1

Not to steal @AntoJurković's thunder but his idea in the comment is the simplest way to accomplish what you want.

Here's an example fiddle.

The important parts are:

series: [{
        type: 'pie',
        name: 'Browser share',
        innerSize: '50%',
        data: [                
            {y: 45, name: 'Firefox'},
            {y: 55, color: 'transparent',dataLabels:{enabled: false}} // instead of the background color, use transparent, and disable dataLabels
        ]
  }]

and

   tooltip: {
        formatter: function(){
            if (this.point.color == "transparent") {
                return false; // suppress the tooltips if it has no color
            } else {                    
                return this.series.name + ':<b>' + this.point.percentage +'%</b>';
            }
        }
    },

Related Articles