Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..

Given below is a brief description of the attributes used to show percent values:

Attribute Description

showPercentValues

It is used to specify whether percentage values will be rendered as data labels on the chart. Setting this attribute to 1 will show percent values as data labels, setting it to 0 (default) will show actual values.

showPercentInTooltip

It is used to specify whether percent values will be shown as a part of the tool-tip text. Setting this attribute to 0 (default) will show actual values in the tool-tip text, setting it to 1 will show percent values.

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize the center label:

Attribute Description

defaultCenterLabel

It is used to specify the default text to render for the center label of a doughnut chart.

centerLabel

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to enable single-slicing:

Attribute Description

enableMultiSlicing

It is used to specify whether single-slicing will be enabled for pie/doughnut charts. Setting this attribute to 0 will enable single-slicing for the chart, setting it to 1 (default) will enable multi-slicing.

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to disable smart labels:

Attribute Description

enableSmartLabels

It is used to specify whether smart labels will be rendered for pie/doughnut charts. Setting this attribute to 0 disables smart labels, setting it to 1 (default) enables them.

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to customize smart lines:

Attribute Description

smartLineColor

It is used to specify the hex code of the color that will be used to render the smart label connector lines.

smartLineThickness

It is used to specify the thickness, in pixels, of the smart lines.

smartLineAlpha

It is used to specify the transparency of the smart lines. This attribute takes values between 0 (transparent) and 100 (opaque).

isSmartLineSlanted

It is used to specify whether the smart lines will be rendered as straight lines or slanted lines. Setting this attribute to 0 will render smart lines as straight lines, setting it to 1 (default) will render them as slanted lines.

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" } ] }
{
    "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

labelDistance

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.

smartLabelClearance

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

skipOverlapLabels

It is used to specify whether overlapping labels will be skipped. Setting this attribute to 0will render overlapping lables, setting it to 1 (default) will skip them.

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:

FusionCharts will load here..

Given below is a brief description of the attribute used to customize the outer radius:

Attribute Description

pieRadius

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to set the starting angle:

Attribute Description

startingAngle

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to slice out a pie slice when the chart is first rendered:

Attribute Description

isSliced

It is used to specify whether the pie chart will be rendered with one slice sliced-out. Setting this attribute to 1 for a pie slice will render that slice sliced-out, setting it to 0 (default) will render it sliced-in. This attribute belongs to the data object.

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attribute used to configure the slicing distance:

Attribute Description

slicingDistance

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" } ] }
{
    "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:

FusionCharts will load here..

Given below is a brief description of the attributes used to configure the bevel effect:

Attribute Description

use3DLighting

It is used to specify whether advanced gradients and shadow effects will be used to create better looking charts. Setting this attribute to 1 will render the pie/doughnut chart with 3D effects, setting it to 0 (default) will render it in the 2D mode.

radius3D

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" } ] }
{
    "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.

Top