Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

Select a chart type from list below to see attributes and details

  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z

JavaScript alias: multilevelpie

See all attributes
Multi-level Pie Chart with caption "Split of Top Products Sold"Sales by categoryFood & BeveragesApparel &AccessoriesBaby ProductsElectronicsBreadsJuiceNoodlesSeafoodSun GlassesClothingHandbagsShoesBath &GroomingFeedingDiapersLaptopsTelevisionsSmartPhonesSplit of Top Products SoldLast Quarter
{"chart":{"caption":"Split of Top Products Sold","subCaption":"Last Quarter","captionFontSize":"14","subcaptionFontSize":"14","baseFontColor":"#333333","baseFont":"Helvetica Neue,Arial","basefontsize":"9","subcaptionFontBold":"0","bgColor":"#ffffff","canvasBgColor":"#ffffff","showBorder":"0","showShadow":"0","showCanvasBorder":"0","pieFillAlpha":"60","pieBorderThickness":"2","hoverFillColor":"#cccccc","pieBorderColor":"#ffffff","useHoverColor":"1","showValuesInTooltip":"1","showPercentInTooltip":"0","numberPrefix":"$","plotTooltext":"$label, $$valueK, $percentValue"},"category":[{"label":"Sales by category","color":"#ffffff","value":"150","category":[{"label":"Food & {br}Beverages","color":"#f8bd19","value":"55.5","category":[{"label":"Breads","color":"#f8bd19","value":"11.1"},{"label":"Juice","color":"#f8bd19","value":"27.75"},{"label":"Noodles","color":"#f8bd19","value":"9.99"},{"label":"Seafood","color":"#f8bd19","value":"6.66"}]},{"label":"Apparel &{br}Accessories","color":"#e44a00","value":"42","category":[{"label":"Sun Glasses","color":"#e44a00","value":"10.08"},{"label":"Clothing","color":"#e44a00","value":"18.9"},{"label":"Handbags","color":"#e44a00","value":"6.3"},{"label":"Shoes","color":"#e44a00","value":"6.72"}]},{"label":"Baby {br}Products","color":"#008ee4","value":"22.5","category":[{"label":"Bath &{br}Grooming","color":"#008ee4","value":"9.45"},{"label":"Feeding","color":"#008ee4","value":"6.3"},{"label":"Diapers","color":"#008ee4","value":"6.75"}]},{"label":"Electronics","color":"#33bdda","value":"30","category":[{"label":"Laptops","color":"#33bdda","value":"8.1"},{"label":"Televisions","color":"#33bdda","value":"10.5"},{"label":"SmartPhones","color":"#33bdda","value":"11.4"}]}]}]}
                                {
    "chart": {
        "caption": "Split of Top Products Sold",
        "subCaption": "Last Quarter",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "baseFontColor": "#333333",
        "baseFont": "Helvetica Neue,Arial",
        "basefontsize": "9",
        "subcaptionFontBold": "0",
        "bgColor": "#ffffff",
        "canvasBgColor": "#ffffff",
        "showBorder": "0",
        "showShadow": "0",
        "showCanvasBorder": "0",
        "pieFillAlpha": "60",
        "pieBorderThickness": "2",
        "hoverFillColor": "#cccccc",
        "pieBorderColor": "#ffffff",
        "useHoverColor": "1",
        "showValuesInTooltip": "1",
        "showPercentInTooltip": "0",
        "numberPrefix": "$",
        "plotTooltext": "$label, $$valueK, $percentValue"
    },
    "category": [
        {
            "label": "Sales by category",
            "color": "#ffffff",
            "value": "150",
            "category": [
                {
                    "label": "Food & {br}Beverages",
                    "color": "#f8bd19",
                    "value": "55.5",
                    "category": [
                        {
                            "label": "Breads",
                            "color": "#f8bd19",
                            "value": "11.1"
                        },
                        {
                            "label": "Juice",
                            "color": "#f8bd19",
                            "value": "27.75"
                        },
                        {
                            "label": "Noodles",
                            "color": "#f8bd19",
                            "value": "9.99"
                        },
                        {
                            "label": "Seafood",
                            "color": "#f8bd19",
                            "value": "6.66"
                        }
                    ]
                },
                {
                    "label": "Apparel &{br}Accessories",
                    "color": "#e44a00",
                    "value": "42",
                    "category": [
                        {
                            "label": "Sun Glasses",
                            "color": "#e44a00",
                            "value": "10.08"
                        },
                        {
                            "label": "Clothing",
                            "color": "#e44a00",
                            "value": "18.9"
                        },
                        {
                            "label": "Handbags",
                            "color": "#e44a00",
                            "value": "6.3"
                        },
                        {
                            "label": "Shoes",
                            "color": "#e44a00",
                            "value": "6.72"
                        }
                    ]
                },
                {
                    "label": "Baby {br}Products",
                    "color": "#008ee4",
                    "value": "22.5",
                    "category": [
                        {
                            "label": "Bath &{br}Grooming",
                            "color": "#008ee4",
                            "value": "9.45"
                        },
                        {
                            "label": "Feeding",
                            "color": "#008ee4",
                            "value": "6.3"
                        },
                        {
                            "label": "Diapers",
                            "color": "#008ee4",
                            "value": "6.75"
                        }
                    ]
                },
                {
                    "label": "Electronics",
                    "color": "#33bdda",
                    "value": "30",
                    "category": [
                        {
                            "label": "Laptops",
                            "color": "#33bdda",
                            "value": "8.1"
                        },
                        {
                            "label": "Televisions",
                            "color": "#33bdda",
                            "value": "10.5"
                        },
                        {
                            "label": "SmartPhones",
                            "color": "#33bdda",
                            "value": "11.4"
                        }
                    ]
                }
            ]
        }
    ]
}
                            
                                <chart caption="Split of Top Products Sold" subcaption="Last Quarter" captionfontsize="14" subcaptionfontsize="14" basefontcolor="#333333" basefont="Helvetica Neue,Arial" basefontsize="9" subcaptionfontbold="0" bgcolor="#ffffff" canvasbgcolor="#ffffff" showborder="0" showshadow="0" showcanvasborder="0" piefillalpha="60" pieborderthickness="2" hoverfillcolor="#cccccc" piebordercolor="#ffffff" usehovercolor="1" showvaluesintooltip="1" showpercentintooltip="0" numberprefix="$" plottooltext="$label, $$valueK, $percentValue">
    <category label="Sales by category" color="#ffffff" value="150">
        <category label="Food &amp; {br}Beverages" color="#f8bd19" value="55.5">
            <category label="Breads" color="#f8bd19" value="11.1" />
            <category label="Juice" color="#f8bd19" value="27.75" />
            <category label="Noodles" color="#f8bd19" value="9.99" />
            <category label="Seafood" color="#f8bd19" value="6.66" /></category>
        <category label="Apparel &amp;{br}Accessories" color="#e44a00" value="42">
            <category label="Sun Glasses" color="#e44a00" value="10.08" />
            <category label="Clothing" color="#e44a00" value="18.9" />
            <category label="Handbags" color="#e44a00" value="6.3" />
            <category label="Shoes" color="#e44a00" value="6.72" /></category>
        <category label="Baby {br}Products" color="#008ee4" value="22.5">
            <category label="Bath &amp;{br}Grooming" color="#008ee4" value="9.45" />
            <category label="Feeding" color="#008ee4" value="6.3" />
            <category label="Diapers" color="#008ee4" value="6.75" /></category>
        <category label="Electronics" color="#33bdda" value="30">
            <category label="Laptops" color="#33bdda" value="8.1" />
            <category label="Televisions" color="#33bdda" value="10.5" />
            <category label="SmartPhones" color="#33bdda" value="11.4" /></category>
    </category>
</chart>
                            

Multi-level Pie Chart Attributes

Functional Attributes

These attributes let you control a variety of functional elements on the chart.

chart
: {
animation

: Boolean

[+]

This attribute lets you set the configuration whether the chart should appear in an animated fashion. If you do not want to animate any part of the chart, set this as 0.

Range: 0/1
palette

: Number

[+]

Each chart has 5 pre-defined color palettes which you can choose from. Each palette renders the chart in a different color theme.

Range: 1-5
clickURL

: String

[+]

The entire chart can now act as a hotspot. Use this URL to define the hotspot link for the chart. The link can be specified in FusionCharts Link Format.

clickURLOverridesPlotLinks

: Boolean

[+] since 3.7.0

Sets whether the clickURL attribute (that sets a link to which the user is directed when the chart is clicked) overrides the link attribute (that sets a link to which the user is directed when a data plot is clicked).

Default value: 0 (clickURL does not override link)

Range: 0/1
paletteColors

: String

[+]

While the palette attribute allows to select a palette theme that applies to chart background, canvas, font and tool-tips, it does not change the colors of data items (that is, column, line, pie etc.). Using paletteColors attribute, you can specify your custom list of hex colors for the data items. The list of colors have to be separated by comma. For example, &quot;paletteColors&quot;: &quot;#FF0000, #0372AB, #FF5904...&quot;. The chart will cycle through the list of specified colors and then render the data plot accordingly. To use the same set of colors throughout all your charts in a web application, you can store the list of palette colors in your application globally and then provide the same in each chart JSON.

Range: List of hex color codes separated by comma
showPrintMenuItem

: Boolean

[+]

When you right click on the chart it shows a context menu. This attribute allows you to show or hide the "Print" option in the context menu.

Range: 0/1
unescapeLinks

: Boolean

[+]

Internally the chart decodes a Url that you set as link. Before invoking the link it again encodes the Url. If you are passing multilingual characters via a Url or do not want this decode-encode mechanism to be handled by chart you can set,unescapeLinks='0'.

Range: 0/1
showLabels

: Boolean

[+]

Allows you to show or hide the labels on the chart.

Range: 0/1
showValues

: Boolean

[+] since 3.2.1

Allows you to show or hide the values on the chart.

Range: 0/1
showValuesInTooltip

: Boolean

[+] since 3.2.1

Allows you to show the values of the chart in the tooltip.

Range: 0/1
showPercentValues

: Boolean

[+] since 3.2.1

Allows you to show the values as percentage on the chart.

Range: 0/1
showPercentInTooltip

: Boolean

[+] since 3.2.1

Allows you to show the percentage values of the chart in tooltip.

Range: 0/1
hasRTLText

: Number

[+] since 3.7.0

This attribute, when set to 1, indicates to the chart that the text (rendered on the chart) may contain RTL characters and the textual display has to be managed accordingly.

baseChartMessageImageHAlign

: String

[+] since 3.7.0

This attribute allows to set a custom horizontal alignment for all images displayed as chart messages.

Default value: middle

Range: left, middle, right
baseChartMessageImageVAlign

: String

[+] since 3.7.0

This attribute allows to set a custom vertical alignment for all images displayed as chart messages.

Default value: middle

Range: top, middle, bottom
baseChartMessageImageAlpha

: Number

[+] since 3.7.0

This attribute allows to set a transparency for all images displayed as chart messages.

Default value: 100

Range: 0-100
baseChartMessageImageScale

: Number

[+] since 3.7.0

This attribute allows to set a scale for magnifying all images displayed as chart messages.

Default value: 100

Range: 0-300
loadMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed when a chart begins to load. To display an image as the chart message, prefix I- to the image URL.

loadMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart loadMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
loadMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart loadMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
loadMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart loadMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
loadMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart loadMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
typeNotSupportedMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed when the specified chart type is not supported. To display an image as the chart message, prefix I- to the image URL.

typeNotSupportedMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
typeNotSupportedMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
typeNotSupportedMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
typeNotSupportedMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart typeNotSupportedMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
renderErrorMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed if an error is encountered while rendering the chart. To display an image as the chart message, prefix I- to the image URL.

renderErrorMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
renderErrorMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart renderErrorMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
renderErrorMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart renderErrorMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
renderErrorMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart renderErrorMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
dataLoadStartMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed when chart data begins loading. To display an image as the chart message, prefix I- to the image URL.

dataLoadStartMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
dataLoadStartMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
dataLoadStartMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
dataLoadStartMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart dataLoadStartMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
dataEmptyMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed if the data loaded for a chart is empty. To display an image as the chart message, prefix I- to the image URL.

dataEmptyMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
dataEmptyMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
dataEmptyMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
dataEmptyMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart dataEmptyMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
dataLoadErrorMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed if an error is encountered while loading chart data. To display an image as the chart message, prefix I- to the image URL.

dataLoadErrorMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
dataLoadErrorMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
dataLoadErrorMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
dataLoadErrorMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart dataLoadErrorMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
dataInvalidMessage

: String

[+] since 3.7.0

This attribute allows to set the message to be displayed if the data to be loaded for the chart is invalid. To display an image as the chart message, prefix I- to the image URL.

dataInvalidMessageImageHAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom horizontal alignment for the image.

Default value: value assigned to the baseChartMessageImageHAlign attribute

Range: left, middle, right
dataInvalidMessageImageVAlign

: String

[+] since 3.7.0

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set a custom vertical alignment for the image.

Default value: value assigned to the baseChartMessageImageVAlign attribute

Range: top, middle, bottom
dataInvalidMessageImageAlpha

: Number

[+] since 3.7.0

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set the transparency of the image.

Default value: 100

Range: 0-100
dataInvalidMessageImageScale

: Number

[+] since 3.7.0

If an image is displayed as the chart dataInvalidMessage, this attribute allows to set the scale for magnifying the image.

Default value: 100

Range: 0-300
}

Chart Titles and Axis Names

Using these attributes, you can set the caption & sub-caption of the chart.

chart
: {
caption

: String

[+]

Caption of the chart.

subCaption

: String

[+]

Sub-caption of the chart.

}

Chart Caption Cosmetics

These attributes let you configure the cosmetics of chart caption and sub-caption.

chart
: {
captionAlignment

: String

[+]

Sets horizontal alignment of caption

Range: "left", "center", "right"
captionOnTop

: Boolean

[+]

Whether caption should be on top of the data plot area

Range: 0/1
captionFontSize

: Number

[+]

Sets the caption font size in pixels

Range: 0 - 72
subCaptionFontSize

: Number

[+]

Sets the sub-caption font size (in pixels)

Range: 0 - 72
captionFont

: String

[+]

Sets the caption font family

Range: Font Name
subCaptionFont

: String

[+]

Sets the sub-caption font family

Range: Font Name
captionFontColor

: Color

[+]

Sets the caption font color

Range: Hex Color Code
subCaptionFontColor

: Color

[+]

Sets the sub-caption font color

Range: Hex Color Code
captionFontBold

: Boolean

[+]

Whether the caption font should be displayed in bold

Range: 0/1
subCaptionFontBold

: Boolean

[+]

Whether the sub caption font should be displayed in bold

Range: 0/1
alignCaptionWithCanvas

: Boolean

[+]

Whether the caption is aligned with the canvas. Else, it will be aligned with the entire chart area

Range: 0/1
captionHorizontalPadding

: Number

[+]

If caption is not centre aligned, lets you configure the padding (in pixels) from either edge. Will be ignored if caption is centre aligned.

Range: In Pixels
}

Chart Cosmetics

The following attributes let you configure chart cosmetics like background color, background alpha etc.

chart
: {
showBorder

: Boolean

[+]

Whether to show a border around the chart or not.

Range: 0/1
borderColor

: Color

[+]

Border color of the chart.

Range: Hex Color Code
borderThickness

: Number

[+]

Border thickness of the chart.

Range: In Pixels
borderAlpha

: Number

[+]

Border alpha of the chart.

Range: 0-100
bgColor

: Color

[+]

This attribute sets the background color for the chart. You can set any hex color code as the value of this attribute. To specify a gradient as background color, separate the hex color codes of each color in the gradient using comma. Example: #FF5904, #FFFFFF.

Range: Hex Color Code
bgAlpha

: Number

[+]

Sets the alpha (transparency) for the background. If you've opted for gradient background, you need to set a list of alpha(s) separated by comma.

Range: 0-100
bgRatio

: Number

[+]

If you've opted for a gradient background, this attribute lets you set the ratio of each color constituent.

Range: 0-100
bgAngle

: Number

[+]

Angle of the background color, in case of a gradient.

Range: 0-360
bgImage

: String

[+] since 3.2.

To place any image (JPG/PNG/GIF) as background of the chart, enter the (path and) name of the background image. It should be in the same domain as the chart.

bgImageAlpha

: Number

[+] since 3.2.

This attribute specifies the opacity for the loaded background image.

Range: 0-100
bgImageDisplayMode

: String

[+] since 3.2.1

Helps you specify the mode in which the background image is to be displayed. Stretch - expands the image to fit the entire chart area, without maintaining original image constraints. Tile - the image is repeated as a pattern on the entire chart area. Fit - fits the image proportionately on the chart area. Fill -proportionately fills the entire chart area with the image. Center - the image is positioned at the center of the chart area. None - Default mode.

Range: stretch, tile, fit, fill, center, none
bgImageValign

: String

[+] since 3.2.1

Helps you to vertically align the background image.

Range: left, center, right
bgImageHalign

: String

[+] since 3.2.1

Helps you to horizontally align the background image.

Range: left, center, right
bgImageScale

: Number

[+] since 3.2.1

Helps you magnify the background image.This attribute will only work when the attribute bgImageDisplayMode is set to none, center, or tile.

Range: 0-300
logoURL

: String

[+]

You can load an external logo (JPEG/PNG) to your chart, this attribute lets you specify the URL. Due to cross domain security restrictions it is advised to use a logo from the same domain name as your charts.

Range: URL
logoPosition

: String

[+]

Where to position the logo on the chart: TL - Top-left TR - Top-right BR - Bottom right BL - Bottom left CC - Center of screen

Range: TL, TR, BL, BR, CC
logoAlpha

: Number

[+]

Once the logo has loaded on the chart, you can configure its opacity using this attribute.

Range: 0-100
logoScale

: Number

[+]

You can also change the scale of an externally loaded logo at run-time by specifying a value for this parameter.

Range: 0-300
logoLink

: String

[+]

If you want to link the logo to an external URL, specify the link in this attribute. The link can be in FusionCharts Link Format, allowing you to link to new windows, pop-ups, frames etc.

Range: URL
}

Data Plot Cosmetics

These attributes let you configure how your plot would appear on the chart.

chart
: {
showPlotBorder

: Boolean

[+]

Whether the pie border would show up.

Range: 0/1
plotBorderColor

: Color

[+]

Color for pie border.

Range: Hex Color Code
plotBorderThickness

: Number

[+]

Thickness for pie border.

Range: 0-5 (Pixels)
plotBorderAlpha

: Number

[+]

Alpha for pie border.

Range: 0-100
plotFillAlpha

: Number

[+]

This attribute lets you set the fill alpha for plot.

Range: 0-100
showShadow

: Boolean

[+]

Whether to apply the shadow effect for pie.

Range: 0/1
shadowColor

: Color

[+]

Lets you set a color of the shadow for pie.

Range: Hex Color Code
shadowAlpha

: Number

[+]

Lets you set alpha of the shadow for pie.

Range: 0-100
plotFillColor

: Color

[+]

Fill color for all the pies.

Range: Hex Color Code
}

Data Value Cosmetics

These attributes let you configure font, background and border cosmetics, of value text-field that appear for each data plot.

chart
: {
valueFont

: String

[+]

Sets the font of the values in the chart

Range: Font Name
valueFontColor

: Color

[+]

Specifies the value font color

Range: Hex Color Code
valueFontSize

: Number

[+]

Specifies the value font size

Range: 0 - 72
valueFontBold

: Boolean

[+]

Whether value font should be bold

Range: 0/1
valueFontItalic

: Boolean

[+]

Whether value font should be italicized

Range: 0/1
valueBgColor

: Color

[+]

Sets the background color for value text

Range: Hex Color Code
valueBorderColor

: Color

[+]

Sets the border color around the value text

Range: Hex Color Code
valueAlpha

: Number

[+]

Sets the value alpha including font and background

Range: 0-100
valueFontAlpha

: Number

[+]

Sets the value font alpha

Range: 0-100
valueBgAlpha

: Number

[+]

Sets the value background alpha

Range: 0-100
valueBorderAlpha

: Number

[+]

Sets the value border alpha

Range: 0-100
valueBorderThickness

: Number

[+]

Sets the value border thickness

Range: In Pixels
valueBorderRadius

: Number

[+]

Sets the value border radius

Range: In Pixels
valueBorderDashed

: Boolean

[+]

Whether the border around the value should be rendered as a dashed border

Range: 0/1
valueBorderDashGap

: Number

[+]

Sets the gap between two consecutive dashes.

Range: In Pixels
valueBorderDashLen

: Number

[+]

Sets the length of each dash

Range: In Pixels
valueHoverAlpha

: Number

[+]

Sets the value alpha on hover

Range: 0-100
valueFontHoverAlpha

: Number

[+]

Sets the value font alpha on hover

Range: 0-100
valueBgHoverAlpha

: Number

[+]

Sets the value background alpha on hover

Range: 0-100
valueBorderHoverAlpha

: Number

[+]

Sets the value border alpha on hover

Range: 0-100
showValuesOnHover

: Boolean

[+]

Displays the value while dataplot on hover

Range: 0/1
}

Pie / Doughnut Properties

The following attributes let you control various functionalities of pie.

chart
: {
pieRadius

: Number

[+]

This attribute lets you explicitly set the outer radius of the chart. The chart automatically calculates the best fit pie radius for the chart. This attribute is useful if you want to enforce one of your own values.

Range: In Pixels
pieBorderColor

: Hex code

[+]

Set the border color of the pie. By default, it is set to 'FFFFFF'.

 
}

Number Formatting

PowerCharts XT offers you a lot of options to format your numbers on the chart. Using the attributes below, you can control a myriad of options like: Formatting of commas and decimals Number prefixes and suffixes Decimal places to which the numbers would round to Scaling of numbers based on a user defined scale Custom number input formats

chart
: {
formatNumber

: Boolean

[+]

This configuration determines whether the numbers displayed on the chart will be formatted using commas, e.g., 40,000 if 'formatNumber': '1'; and 40000 if 'formatNumber': '0';.

Range: 0/1
formatNumberScale

: Boolean

[+]

Configuration whether to add K (thousands) and M (millions) to a number after truncating and rounding it - e.g., if formatNumberScale is set to 1, 1043 will become 1.04K (with decimals set to 2 places). Same with numbers in millions - an M will be added at the end.

Range: 0/1
defaultNumberScale

: String

[+]

The default unit of the numbers that you're providing to the chart.

numberScaleUnit

: String

[+]

Unit of each block of the scale.

numberScaleValue

: String

[+]

Range of the various blocks that constitute the scale.

scaleRecursively

: Boolean

[+] since 3.2.2 - SR3

Whether recursive scaling should be applied.

Range: 0/1
maxScaleRecursion

: Number

[+] since 3.2.2 - SR3

How many recursions to complete during recursive scaling? -1 completes the entire set of recursion.

scaleSeparator

: String

[+] since 3.2.2 - SR3

What character to use to separate the scales that are generated after recursion?

numberPrefix

: String

[+]

Using this attribute, you could add prefix to all the numbers visible on the graph. For example, to represent all dollars figure on the chart, you could specify this attribute to $ to show like $40000, $50000.

Range: Character
numberSuffix

: String

[+]

Using this attribute, you could add a suffix to all the numbers visible on the graph. For example, to represent all figures quantified as per annum on the chart, you could specify this attribute to '/a' to show like 40000/a, 50000/a.

Range: Character
decimalSeparator

: String

[+]

This attribute helps you specify the character to be used as the decimal separator in a number.

Range: Character
thousandSeparator

: String

[+]

This attribute helps you specify the character to be used as the thousands separator in a number.

Range: Character
thousandSeparatorPosition

: Number

[+] since 3.2.2 - SR3

This option helps you specify the position of the thousand separator.

 
inDecimalSeparator

: String

[+]

In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give an error while converting to number. So, FusionCharts XT accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the decimal separator.

Range: Character
inThousandSeparator

: String

[+]

In some countries, commas are used as decimal separators and dots as thousand separators. In XML, if you specify such values, it will give an error while converting to number. So, FusionCharts XT accepts the input decimal and thousand separator from user, so that it can convert it accordingly into the required format. This attribute lets you input the thousand separator.

Range: Character
decimals

: Number

[+]

Number of decimal places to which all numbers on the chart will be rounded to.

Range: 0-10
forceDecimals

: Boolean

[+]

Whether to add 0 padding at the end of decimal numbers. For example, if you set decimals as 2 and a number is 23.4. If forceDecimals is set to 1, FusionCharts XT will convert the number to 23.40 (note the extra 0 at the end).

Range: 0/1
}

Font Properties

Using the attributes below, you can define the generic font properties for all the text on the chart. These attributes allow you a high level control over font properties. If you intend to specify font properties for individual chart elements (like caption, sub-caption etc.), you need to use the Styles feature of PowerCharts XT. Using Styles, you can also specify advanced font properties like Bold, Italics, HTML Mode etc.

chart
: {
baseFont

: String

[+]

This attribute lets you set the font face (family) of all the text (data labels, values etc.) on chart. If you specify the outCnvBaseFont attribute also, then this attribute controls only the font face of text within the chart canvas bounds.

Range: Font Name
baseFontSize

: Number

[+]

This attribute sets the base font size of the chart, that is, all the values and the names in the chart which lie on the canvas will be displayed using the font size provided here.

Range: 0-72
baseFontColor

: Color

[+]

This attribute sets the base font color of the chart, that is, all the values and the names in the chart which lie on the canvas will be displayed using the font color provided here.

Range: Hex Color Code
}

Tool-tip

These attributes let you control the tool tip. You can set the background color, border color, separator character and few other details.

chart
: {
showToolTip

: Boolean

[+]

Whether to show tool tip on chart.

Range: 0/1
toolTipBgColor

: Color

[+]

Background color for tool tip.

Range: Hex Color Code
toolTipColor

: Color

[+]

Font color for the tool-tip.

Range: Hex Color Code
toolTipBorderColor

: Color

[+]

Border color for tool tip.

Range: Hex Color Code
toolTipSepChar

: String

[+]

The character specified as the value of this attribute separates the name and value displayed in tool tip.

useHoverColor

: Boolean

[+]

Whether to use the hover fill color for the pies.

Range: 0/1
hoverFillColor

: Color

[+]

The color which should be used as fill during hover.

Range: Hex Color Code
showToolTipShadow

: Boolean

[+]

Whether to show shadow for tool-tips on the chart.

Range: 0/1
}

Data Plot Hover Effects

If you wish to show an effect on the data plot (column, line anchor, pie etc.) when the user hovers his mouse over the data plot, these attributes let you configure the cosmetics of the hover for all data plots in the chart.

chart
: {
showHoverEffect

: Boolean

[+]

Whether to enable hover effect on charts for all elements

Range: 0/1
plotHoverEffect

: Boolean

[+]

Whether to enable hover effect on charts for data plots (e.g., column, pie) only

Range: 0/1
plotFillHoverColor

: Color

[+]

Specifies the hover color for the data plots

Range: Hex Color Code
plotFillHoverAlpha

: Number

[+]

Specifies the hover alpha for data plots

Range: 1 - 100
}

Chart Padding & Margins

The following attributes help you control chart margins and paddings.

chart
: {
captionPadding

: Number

[+]

This attribute lets you control the space (in pixels) between the sub-caption and top of the chart canvas. If the sub-caption is not defined, it controls the space between caption and top of chart canvas. If neither caption, nor sub-caption is defined, this padding does not come into play.

Range: In Pixels
chartLeftMargin

: Number

[+]

Amount of empty space that you want to put on the left side of your chart. Nothing is rendered in this space.

Range: In Pixels
chartRightMargin

: Number

[+]

Amount of empty space that you want to put on the right side of your chart. Nothing is rendered in this space.

Range: In Pixels
chartTopMargin

: Number

[+]

Amount of empty space that you want to put on the top of your chart. Nothing is rendered in this space.

Range: In Pixels
chartBottomMargin

: Number

[+]

Amount of empty space that you want to put at the bottom of your chart. Nothing is rendered in this space.

Range: In Pixels
}

The category Object

For a multi-level pie chart, the category object is used to define product categories that will be shown on the chart. For defining sub-categories, the category object for the sub-category is nested within the category object of the main category.

category
: {
alpha

: Number

[+]

Alpha for the pie.

Range: 0-100
color

: Color

[+]

Color for the pie

Range: Hex Color Code
label

: String

[+]

Display value for the pie.

link

: String

[+]

Link for the pie.

toolText

: String

[+]

The tooltip defined in the category object appears only when the mouse cursor is hovered over the individual slices. However, this will not appear when the cursor is moved over the data labels (except for a situation when long labels are automatically truncated with ellipses. In this situation, if the mouse cursor is hovered over a truncated label, the tooltip will appear with the full label). In case you want to set a short label and show the full label in tooltip, define the full label using this attribute within the category object. The tooltip with the full label will appear only when the mouse is hovered on the particular slice.

value

: Number

[+]

If you do not want a symmetrical distribution for all the pies, you can allot numeric values to individual pies. This can be done using the value attribute of each category. You will need to define the value for all the categories (pies) then. The sweep angle of the pie would depend on its value. If you just want a symmetrical multi-level pie chart, you can ignore the value.

Range: Numeric Value
}
Top