How do I reduce the padding around a FusionCharts pie chart?

Question

I would like to have a pie chart fill a square chart area, currently I can't get it to use more than ~50% of the area, there's lots of grey space all around it. I have tried setting the margin and spacing attributes but it makes no difference.

Is there a way to reduce the padding between the pie chart and the grey box?

FusionCharts.ready(function() {
  var demographicsChart = new FusionCharts({
    type: 'pie3d',
    renderAt: 'chart-container',
    width: '100%',
    height: '100%',
    dataFormat: 'json',
    dataSource: {
      chart: {
        paletteColors: "#FFAE00,#1566EC,#82C309",
        bgColor: "#ffffff",
        use3DLighting: 1,
        showShadow: 0,
        enableSmartLabels: 0,
        startingAngle: 90,
        showLabels: 0,
        showValues: 0,
        showPercentValues: 0,
        showLegend: 0,
        pieSliceDepth: 20,
        pieYScale: 70,
        bgcolor: "EEEEEE,FFFFFF",
        bgalpha: "100,100",
        bgratio: "0,100",
        bgangle: "90",
        showBorder: 1,
        borderColor: 1,
        borderColor: "DDDDDD",
        borderThickness: 1,
        showToolTip: 0,
        spacing: [0, 0, 0, 0],
        margin: [0, 0, 0, 0],
        animation: 0,
        width: "100%",
        height: "100%",
      },
      "data": [{
        "label": "Not Started",
        "value": 13
      }, {
        "label": "Complete",
        "value": 9
      }, {
        "label": "In Progress",
        "value": 33
      }]
    }
  });
  demographicsChart.render();
});

body {
  padding: 1em;
}
#chart-container {
  width: 300px;
  height: 300px;
}

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<div id="chart-container">FusionCharts will render here</div>

Answer 1

This seems to be only a partial answer. If you want to display the pie values on the chart, there are two problems:

1. Values cannot be displayed inside the chart. Is there no method for this? and
2. Values that displayed outside the chart have a large amount of padding between the value and the chart. Is there any method to reduce that space?

Answer 2

By default, FusionCharts XT automatically calculates the best fit pie radius for the chart. But if you want to enforce one of your own values, you can use the attribute "pieRadius". The value is a number which represents the outer radius of the chart. It is mentioned in the docs here http://docs.fusioncharts.com/tutorial-attr-pie3d.html.

I have created a fiddle for you with increased radius. Let me know if this helps. http://jsfiddle.net/subramaniashiva/ZjyJT/7/

FusionCharts.ready(function () {
var demographicsChart = new FusionCharts({
    type: 'pie3d',
    renderAt: 'chart-container',
    width: '100%',
    height: '100%',
    dataFormat: 'json',
    dataSource: {
        chart: {
            paletteColors: "#FFAE00,#1566EC,#82C309",
            bgColor: "#ffffff",
            use3DLighting: 1,
            showShadow: 0,
            enableSmartLabels: 0,
            startingAngle: 90,
            showLabels: 0,
            showValues: 0,
            showPercentValues: 0,
            showLegend: 0,
            pieSliceDepth: 20,
            pieYScale: 70,
            bgcolor: "EEEEEE,FFFFFF",
            bgalpha: "100,100",
            bgratio: "0,100",
            bgangle: "90",
            showBorder: 1,
            borderColor: "DDDDDD",
            borderThickness: 1,
            showToolTip: 0,
            animation: 0,
            width: "100%",
            height: "100%",
            pieRadius: 148
        },
            "data": [{
            "label": "Not Started",
                "value": 13
        }, {
            "label": "Complete",
                "value": 9
        }, {
            "label": "In Progress",
                "value": 33
        }]
    }
});
demographicsChart.render();
});