Pushing a Slice Away From a Pie Chart

How to:

The explodeSlice property defines the distance (in pixels) to push a slice away from the pie chart.

Top of page
x
Syntax: How to Push a Slice Away From a Pie Chart
series:
[
    (
      series: number,
      group: number,
      explodeSlice: value   }
]

where:

series: number

Is a zero-based series number. If the series does not exist in the chart, the property is ignored.

group: number

For multi-pie charts, is an optional zero-based group (pie) number. If the group does not exist in the chart, the property is ignored. If a group number is not specified, the property is applied to all pies.

explodeSlice: value

Is a number that defines the distance (in pixels) to push a slice away from the pie, or a percentage string enclosed in single quotation marks and including a percent symbol (for example, '25%') to explode a slice as a percentage of the radius of the pie. For example, if the pie is 200 pixels in diameter (100 pixels radius), explodeSlice: '50%' will push the slice out 50 pixels from the center of the pie.
Example: Pushing Pie Slices Away From the Pie

The following request generates a pie chart and explodes the slices for series 2, 4, and 6:

GRAPH FILE WFLITE
SUM COGS_US 
ACROSS PRODUCT_CATEGORY
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
   {series: 0, color: 'cyan'},
   {series: 1, color: 'bisque'},
   {series: 2, color: 'slateblue', explodeSlice: 8},
   {series: 3, color: 'red'},
   {series: 4, color: 'green', explodeSlice: 18},
   {series: 5, color: 'yellow'},
   {series: 6, color: 'orange', explodeSlice: 14}
 ]
*END
ENDSTYLE
END

The output is:

The following request generates multiple pies and explodes the slices for series 0 in pie 0, for series 1 in pie 1, and for series 2 in pie 2:

GRAPH FILE WFLITE
SUM COGS_US GROSS_PROFIT_US MSRP_US REVENUE_US
ACROSS PRODUCT_CATEGORY
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
   {series: 0, color: 'bisque'},
   {series: 0, group: 0, explodeSlice: 10},
   {series: 1, color: 'cyan'},
   {series: 1, group: 1, explodeSlice: 20},
   {series: 2, color: 'coral'},
   {series: 2, group: 2, explodeSlice: 30},
   {series: 3, color: 'lightblue'},
]
*END
ENDSTYLE
END

The output is:

Information Builders