Choose an item

Multi-level Pie Chart

This chart type belongs to PowerCharts XT.

The multi-level pie chart is a special type of chart that allows you to show symmetrical and asymmetrical tree structures in a consolidated pie-like structure. It presents the entire hierarchical data in a single-screen snapshot, which makes it a preferred choice over a tree view. Also, the pie slices can assume numerical values and thereby divide the visual segments in a ratio based on the numerical values. The chart also offers advanced interactivity options like visual path tracing from any child to parent.

This chart can be used to show various types of data like:

  • Organization structure

  • Multi-tiered data presentation, e.g., keyword analysis

  • Inter-linked tree data, e.g., friends of friends

  • Sales breakup, e.g., for top product categories

As an example, we will create a multi-level pie chart that shows the sales breakup of top product categories for the last quarter at Harry's SuperMart.

To create a multi-level pie chart follow the steps given below:

  • In the JSON data, set the attributes and their corresponding values in "<attributeName>": "<value>" format.

  • Specify the chart type using the type attribute. To render a multi-level pie chart, set multilevelpie.

  • Set the container object using renderAt attribute.

  • Specify the dimension of the chart using width and height attributes.

  • Set the type of data (JSON/XML) you want to pass to the chart object using dataFormat attribute.

For a detailed list of attributes, refer to the chart attributes page of multi-level pie chart.

The multi-level pie chart thus rendered looks like this:

FusionCharts will load here..
{
    "chart": {
        "caption": "Sales Breakup - Top Product Categories",
        "subcaption": "Last Quarter",
        "showPlotBorder": "1",
        "piefillalpha": "60",
        "pieborderthickness": "2",
        "hoverfillcolor": "#CCCCCC",
        "piebordercolor": "#FFFFFF",
        "numberprefix": "$",
        "plottooltext": "$label, $$valueK, $percentValue",
        "theme": "fusion"
    },
    "category": [
        {
            "label": "Products",
            "color": "#ffffff",
            "value": "150",
            "category": [
                {
                    "label": "Food & {br}Beverages",
                    "color": "#f8bd19",
                    "value": "55.5",
                    "tooltext": "Food & Beverages, $$valueK, $percentValue",
                    "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": "#33ccff",
                    "value": "42",
                    "tooltext": "Apparel & Accessories, $$valueK, $percentValue",
                    "category": [
                        {
                            "label": "Sun Glasses",
                            "color": "#33ccff",
                            "value": "10.08"
                        },
                        {
                            "label": "Clothing",
                            "color": "#33ccff",
                            "value": "18.9"
                        },
                        {
                            "label": "Handbags",
                            "color": "#33ccff",
                            "value": "6.3"
                        },
                        {
                            "label": "Shoes",
                            "color": "#33ccff",
                            "value": "6.72"
                        }
                    ]
                },
                {
                    "label": "Baby {br}Products",
                    "color": "#ffcccc",
                    "value": "22.5",
                    "tooltext": "Baby Products, $$valueK, $percentValue",
                    "category": [
                        {
                            "label": "Bath &{br}Grooming",
                            "color": "#ffcccc",
                            "value": "9.45",
                            "tooltext": "Bath & Grooming, $$valueK, $percentValue"
                        },
                        {
                            "label": "Food",
                            "color": "#ffcccc",
                            "value": "6.3"
                        },
                        {
                            "label": "Diapers",
                            "color": "#ffcccc",
                            "value": "6.75"
                        }
                    ]
                },
                {
                    "label": "Electronics",
                    "color": "#ccff66",
                    "value": "30",
                    "category": [
                        {
                            "label": "Laptops",
                            "color": "#ccff66",
                            "value": "8.1"
                        },
                        {
                            "label": "Televisions",
                            "color": "#ccff66",
                            "value": "10.5"
                        },
                        {
                            "label": "SmartPhones",
                            "color": "#ccff66",
                            "value": "11.4"
                        }
                    ]
                }
            ]
        }
    ]
}
<chart caption="Sales Breakup - Top Product Categories" subcaption="Last Quarter" showplotborder="1" piefillalpha="60" pieborderthickness="2" hoverfillcolor="#CCCCCC" piebordercolor="#FFFFFF" numberprefix="$" plottooltext="$label, $$valueK, $percentValue" theme="fusion">
    <category label="Products" color="#ffffff" value="150">
        <category label="Food &amp; {br}Beverages" color="#f8bd19" value="55.5" tooltext="Food &amp; Beverages, $$valueK, $percentValue">
            <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="#33ccff" value="42" tooltext="Apparel &amp; Accessories, $$valueK, $percentValue">
            <category label="Sun Glasses" color="#33ccff" value="10.08" />
            <category label="Clothing" color="#33ccff" value="18.9" />
            <category label="Handbags" color="#33ccff" value="6.3" />
            <category label="Shoes" color="#33ccff" value="6.72" /></category>
        <category label="Baby {br}Products" color="#ffcccc" value="22.5" tooltext="Baby Products, $$valueK, $percentValue">
            <category label="Bath &amp;{br}Grooming" color="#ffcccc" value="9.45" tooltext="Bath &amp; Grooming, $$valueK, $percentValue" />
            <category label="Food" color="#ffcccc" value="6.3" />
            <category label="Diapers" color="#ffcccc" value="6.75" /></category>
        <category label="Electronics" color="#ccff66" value="30">
            <category label="Laptops" color="#ccff66" value="8.1" />
            <category label="Televisions" color="#ccff66" value="10.5" />
            <category label="SmartPhones" color="#ccff66" value="11.4" /></category>
    </category>
</chart>
<html>
<head>
	<title>My first chart using FusionCharts Suite XT</title>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
	<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
	<script type="text/javascript">
		FusionCharts.ready(function(){
			var chartObj = new FusionCharts({
    type: 'multilevelpie',
    renderAt: 'chart-container',
    
    width: '500',
    height: '500',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Sales Breakup - Top Product Categories",
            "subcaption": "Last Quarter",
            "showPlotBorder": "1",
            "piefillalpha": "60",
            "pieborderthickness": "2",
            "hoverfillcolor": "#CCCCCC",
            "piebordercolor": "#FFFFFF",
            "hoverfillcolor": "#CCCCCC",
            "numberprefix": "$",
            "plottooltext": "$label, $$valueK, $percentValue",
            //Theme
            "theme": "fusion"
        },
        "category": [{
            "label": "Products",
            "color": "#ffffff",
            "value": "150",
            "category": [{
                "label": "Food & {br}Beverages",
                "color": "#f8bd19",
                "value": "55.5",
                "tooltext": "Food & Beverages, $$valueK, $percentValue",
                "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": "#33ccff",
                "value": "42",
                "tooltext": "Apparel & Accessories, $$valueK, $percentValue",
                "category": [{
                    "label": "Sun Glasses",
                    "color": "#33ccff",
                    "value": "10.08"
                }, {
                    "label": "Clothing",
                    "color": "#33ccff",
                    "value": "18.9"
                }, {
                    "label": "Handbags",
                    "color": "#33ccff",
                    "value": "6.3"
                }, {
                    "label": "Shoes",
                    "color": "#33ccff",
                    "value": "6.72"
                }]
            }, {
                "label": "Baby {br}Products",
                "color": "#ffcccc",
                "value": "22.5",
                "tooltext": "Baby Products, $$valueK, $percentValue",
                "category": [{
                    "label": "Bath &{br}Grooming",
                    "color": "#ffcccc",
                    "value": "9.45",
                    "tooltext": "Bath & Grooming, $$valueK, $percentValue",

                }, {
                    "label": "Food",
                    "color": "#ffcccc",
                    "value": "6.3"
                }, {
                    "label": "Diapers",
                    "color": "#ffcccc",
                    "value": "6.75"
                }]
            }, {
                "label": "Electronics",
                "color": "#ccff66",
                "value": "30",
                "category": [{
                    "label": "Laptops",
                    "color": "#ccff66",
                    "value": "8.1"
                }, {
                    "label": "Televisions",
                    "color": "#ccff66",
                    "value": "10.5"
                }, {
                    "label": "SmartPhones",
                    "color": "#ccff66",
                    "value": "11.4"
                }]
            }]
        }]
    }
}
);
			chartObj.render();
		});
	</script>
	</head>
	<body>
		<div id="chart-container">FusionCharts XT will load here!</div>
	</body>
</html>

Click here to edit the multi-level pie chart.

Now, let's customize the appearance and properties of the multi-level pie chart.

Configure highlight effect

Set the direction of the highlight effect of the plots, when hovered over, using the highlightParentPieSlices and highlightChildPieSlices attributes. For instance:

  • Set the value of highlightParentPieSlices to 0 to prevent child pie slices from getting highlighted, when you hover over the parent slices.

  • Set the value of highlightChildPieSlices to 1 to automatically also highlight parent slices when you hover over the child pie slices.

Refer to the code below:

{
    "chart": {
        "highlightParentPieSlices": "0",
        "highlightChildPieSlices": "1"
    },
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the multi-level pie chart.

Configure inner radius

Use the InnerRadius attribute to explicitly set the inner radius of the pie chart to a value of your choosing.

Refer to the code below:

{
    "chart": {
        "innerRadius": "10"
    },
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the multi-level pie chart.

Export Multi-level pie chart in CSV or XLSX formats

In version 3.13.0, you can export data from multi-level pie charts in CSV or XLSX formats. Set the value of the enableExport attribute to 1 to do so.

Refer to the code below:

{
    "chart": {
        "exportEnabled": "1"
    },
}

The chart will look as shown below:

FusionCharts will load here..

Click here to edit the multi-level pie chart.

Show/Hide Category Label and Value

Starting version 3.13.5, you can enable or disable the visibility of labels and values categorically using showLabel and showValue respectively. For instance:

  • Set the value of showLabel to 0 to hide a label of a particular category.
  • Set the value of showValue to 0 to hide the value of a particular category.

Refer to the code below:

"category": [{
    "showlabel": "0",
    "showvalue": "0"
}]

The chart will look like as shown below:

FusionCharts will load here..

Click here to edit the above chart.