2D Doughnut Chart Formatting

[JamesB2]

Here's my current 2d doughnut chart using FustionCharts v3.11.3

The area is 195 x 230

Here's the formatting options that I'm using:

<chart theme="asi"
  animation='0'
  caption='${w.caption!}'
  captionPadding='0'
  baseFontSize='10'
  baseFontColor='#FFFFFF'
  bgAlpha='100'
  bgColor='#000000'
  enableSmartLabels='1'
  manageLabelOverflow='1'
  useEllipsesWhenOverflow='0'
  showBorder='0'
  showZeroPies='1'
  showPercentValues='0'
  showValues='1'
  decimals='0'
  centerlabel='$label: $value'
  pieRadius='50'
  valueposition='inside'
  labelDistance='10'
  labelFontColor='#FFFFFF'
  chartLeftMargin='0'
  chartRightMargin='0'
  chartTopMargin='10'
  chartBottomMargin='0'
>

</chart>

 

What I'm looking to do is to increase the size of the labels "Major" and "Critical", and decrease the amount of space between the chart and the labels.  I'd like to make it look like this:

Again, we are on version 3.11.3.  

I've tried to increase the font size, but when I do that, the "Major and "Critical" move off to the side and look like this:

[Akash Biswas]

Hi James,

 

The internal algorithm of FusionCharts automatically adjusts the space management based on the provided chart dimensions(height and width) of the Doughnut charts. However, this space management is disabled if you explicitly set the component dimensions like pieRadius attribute configurations.

So to achieve a similar visualization as per your required one, check this modified dataSource by removing the explicit configuration attributes :
http://jsfiddle.net/ynLprt9h/2/

Please note : Keep the configuration attributes "manageLabelOverflow" and "useEllipsesWhenOverflow" enabled as it would automatically adjust and avoid labels to go out of the canvas when a larger font size is set to the labels using "labelFontSize" configuration attributes.

 

Thanks,

Akash.