Can I assign a different radius for each pie slice using Highcharts?

Question

I am using Highcharts and it is working just amazing, i am stuck at a place where i want to plot a pie chart in which every pie slice (in a single pie chart) has a different

Answer 1

Each series in a pie chart can have their own size. So, I stacked a bunch of pie series calculating their begin and end angles. You'll have to do a little clean up to get the tooltips displaying the value instead of 100, but I think it's a workable solution.

Note: The following code makes a bad assumption that the data points add to 100. void fixes that assumption in his fiddle http://jsfiddle.net/58zfb8gy/1.

http://jsfiddle.net/58zfb8gy/

$(function() {
  var data = [{
    name: 'Thane',
    y: 25,
    color: 'red'
  }, {
    name: 'Nagpur',
    y: 15,
    color: 'blue'
  }, {
    name: 'Pune',
    y: 30,
    color: 'purple'
  }, {
    name: 'Mumbai',
    y: 30,
    color: 'green'
  }];
  var start = -90;
  var series = [];
  for (var i = 0; i < data.length; i++) {
    var end = start + 360 * data[i].y / 100;
    data[i].y = 100;

    series.push({
      type: 'pie',
      size: 100 + 50 * i,
      innerSize: 50,
      startAngle: start,
      endAngle: end,
      data: [data[i]]
    });
    start = end;
  };
  $('#container').highcharts({
    series: series
  });
});

Another way I toyed with, that I didn't like as much, was having each series have invisible points:

series = [{
  type: 'pie',
  size: 100,
  innerSize: 50,
  data: [{y:25, color: 'red'}, {y:75, color:'rgba(0,0,0,0)'}]
},{
  type: 'pie',
  size: 150,
  innerSize: 50,
  data: [{y:25, color: 'rgba(0,0,0,0)'},{y:15, color: 'blue'}, {y:60, color:'rgba(0,0,0,0)'}]
}, ... ];