Loading
Configuring Pie and Doughnut Charts
FusionCharts Suite XT allows you to configure the functional and cosmetic properties of pie and doughnut charts.
In this section, you will be shown how you can:
-
Show percent values on the chart
-
Customize the center label of a doughnut chart
-
Enable single slice slicing
-
Disable smart labels and smart lines
-
Customize smart lines
-
Configure the label distance and clearance
-
Skip overlapping labels
-
Customize the pie radius
-
Set the starting angle
-
Slice a pie/doughnut
-
Configure the slicing distance
-
Configure the bevel effect
Showing Percent Values on the Chart and Actual Values in Tool-tips
By default, for a pie chart, the actual data values are shown on the chart as well as in the tool-tips. However, you can choose to show percent values on the chart while retaining the actual values in tool-tips.
A pie chart configured to show percent values on the chart looks like this:
Given below is a brief description of the attributes used to show percent values:
| Attribute | Description |
|---|---|
|
It is used to specify whether percentage values will be rendered as data labels on the chart. Setting this attribute to |
|
It is used to specify whether percent values will be shown as a part of the tool-tip text. Setting this attribute to |
The data structure needed to show percent values on the chart while retaining actual values in the tool-tips is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}The showPercentValues and the showPercentInTooltip attributes are applicable if you want to show percent values on the chart and actual values in tool-tips for a doughnut chart.
Customizing the Center Label for a Doughnut Chart
For a doughnut chart, you can configure the default text that will be rendered on the center label. You can also configure the text that will be rendered on the center label when the mouse pointer is hovered over one of the doughnut slices.
A doughnut chart with the center label customized looks like this:
Given below is a brief description of the attributes used to customize the center label:
| Attribute | Description |
|---|---|
|
It is used to specify the default text to render for the center label of a doughnut chart. |
|
It is used to specify the text that will be rendered when the mouse pointer is hovered over a doughnut slice. |
The data structure needed to customize the center label is given below:
{
"chart": {
"caption": "Split of Revenue by Product Categories",
"subCaption": "Los Angeles Topanga - Last month",
"numberPrefix": "$",
"startingAngle": "310",
"decimals": "0",
"defaultCenterLabel": "Total revenue: $60K",
"centerLabel": "Revenue from $label: $value",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "28504"
},
{
"label": "Apparels",
"value": "14633"
},
{
"label": "Electronics",
"value": "10507"
},
{
"label": "Household",
"value": "4910"
}
]
}Enabling Single-slice Slicing
By default, the pie and doughnut charts allow you to slice out multiple pie/doughnut slices at one time. You can, however, opt to enable slicing-out only one slice at a time.
A pie chart with single-slicing enabled looks like this:
Given below is a brief description of the attribute used to enable single-slicing:
| Attribute | Description |
|---|---|
|
It is used to specify whether single-slicing will be enabled for pie/doughnut charts. Setting this attribute to |
The data structure needed to enable single-slicing is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"startingAngle": "20",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"enableSmartLabels": "0",
"enableMultiSlicing": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100",
"isSliced": "1"
}
]
}Disabling Smart Labels and Lines
By default, pie and doughnut charts are rendered with smart labels and lines - smart labels are data labels connected to their corresponding pie slices using line segments called smart lines. Smart labels manage overlapping of labels even when a large number of labels are placed in close vicinity. You can, however, choose to disable these smart labels.
A pie chart with smart labels disabled looks like this:
Given below is a brief description of the attribute used to disable smart labels:
| Attribute | Description |
|---|---|
|
It is used to specify whether smart labels will be rendered for pie/doughnut charts. Setting this attribute to |
The data structure needed to disable smart labels is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"enableSmartLabels": "0",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}If smart labels are disabled then, in case of a large number of labels, the labels might overlap each other.
Customizing Smart Lines
A pie chart with the cosmetic properties of smart lines customized looks like this:
Given below is a brief description of the attributes used to customize smart lines:
| Attribute | Description |
|---|---|
|
It is used to specify the hex code of the color that will be used to render the smart label connector lines. |
|
It is used to specify the thickness, in pixels, of the smart lines. |
|
It is used to specify the transparency of the smart lines. This attribute takes values between 0 (transparent) and 100 (opaque). |
|
It is used to specify whether the smart lines will be rendered as straight lines or slanted lines. Setting this attribute to |
The data structure needed to customize smart lines is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"startingAngle": "30",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"smartLineColor": "#d11b2d",
"smartLineThickness": "2",
"smartLineAlpha": "75",
"isSmartLineSlanted": "0",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}Configuring the Label Distance and Clearance
Given below is a brief description of the attributes used to configure the label distance and clearance:
| Attribute | Description |
|---|---|
|
It is used to specify the distance, in pixels, between the label/value text boxes from the pie/doughnut edge. This attribute is applicable only when smart labeling is disabled. |
|
It is used to specify the clearance distance, in pixels, of a label (for sliced-in pies) from adjacent sliced out pies. |
Skipping Overlap Labels
When there are too many labels in the pie/doughnut chart (which is difficult to adjust even if you are using smart labels), the labels may overlap. In this case, you have the option to skip the overlapping labels. The labels of the least significant pies will be removed.
Given below is a brief description of the attribute used to skip overlap labels:
| Attribute | Description |
|---|---|
|
It is used to specify whether overlapping labels will be skipped. Setting this attribute to |
Customizing Pie Radius
By default, for pie/doughnut charts, the chart automatically calculates the best fit pie radius based on the data provided. However, you can choose to explicitly set the outer radius of the pie chart.
A pie chart with the outer radius customized looks like this:
Given below is a brief description of the attribute used to customize the outer radius:
| Attribute | Description |
|---|---|
|
It is used to specify the outer radius of the pie/doughnut chart. |
The data structure needed to configure the outer radius is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"pieRadius": "75",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}Setting the Starting Angle
By default, pie/doughnut charts start plotting from the 0° angle. The chart allows you to explicitly set the starting angle.
A pie chart with the starting angle set to 45° looks like this:
Given below is a brief description of the attribute used to set the starting angle:
| Attribute | Description |
|---|---|
|
It is used to specify the starting angle for the pie/doughnut chart. The first pie slice will start plotting from the angle measure specified in this attribute. |
The data structure needed to set the starting angle is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"startingAngle": "45",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}Slicing a Pie/Doughnut
When a pie/doughnut chart first renders, by default, all slices are sliced-in. However, to highlight a slice, you may want to render it sliced-out when the chart first loads.
A pie chart rendered with one slice sliced-out looks like this:
Given below is a brief description of the attribute used to slice out a pie slice when the chart is first rendered:
| Attribute | Description |
|---|---|
|
It is used to specify whether the pie chart will be rendered with one slice sliced-out. Setting this attribute to |
The data structure needed to show one pie/doughnut slice sliced-out when the chart is first rendered is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"startingAngle": "20",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"showLegend": "1",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100",
"isSliced": "1"
}
]
}Configuring the Slicing Distance
When a pie/doughnut slice is sliced-out, you can configure the distance between the center and the sliced-out slices.
A chart with the slicing distance configured looks like this:
Given below is a brief description of the attribute used to configure the slicing distance:
| Attribute | Description |
|---|---|
|
It is used to specify the distance, in pixels, between the center of the chart and the sliced-out slices. |
The data structure needed to configure the slicing distance is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"useDataPlotColorForLabels": "1",
"slicingDistance ": "10",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}Configuring the Bevel Effect
For pie/doughnut charts, you can configure the bevel effect to render the chart with 3D effects.
A pie chart configured for the bevel effect looks like this:
Given below is a brief description of the attributes used to configure the bevel effect:
| Attribute | Description |
|---|---|
|
It is used to specify whether advanced gradients and shadow effects will be used to create better looking charts. Setting this attribute to |
|
It is used to specify the 3D radius of the chart, in percentage, when the chart is rendered in the 3D lighting mode. It basically helps to set the bevel distance for the pie/doughnut. |
The data structure needed to configure the bevel effect is given below:
{
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"enableSmartLabels": "1",
"use3DLighting": "1",
"useDataPlotColorForLabels": "1",
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
}For all the samples shown above, if you want so see how each attribute works for the doughnut chart, just change the value of the type attribute from pie2D/pie3D to doughnut2D/doughnut3D.
There! You have now seen how you can configure the pie and doughnut charts.