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.

{ "header": "Chart Anatomy", "subHeader": "To know how FusionCharts works it is important to understand the various components and concepts of a chart", "content": { "header": "Below are different sections with interactive annotated images describing various components and concepts of charts", "contentGroup": [{ "itemHeader": "Multi-level Pie Chart Anatomy", "imgSrc": "multi-level-pie-chart.png", "annotations": [{ "annotationNumber": "1", "annotationName": "Caption", "annotationDesc": "The caption (also called the chart title) is the heading of your chart, you can add custom text for the caption, as well as configure its font properties and cosmetics.", "annotationDescLinkPath": null, "leftPosition": "31.5%", "topPosition": "9%", "annotationLinks": [{ "linkDesc": "Learn how to add caption ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption" }, { "linkDesc": "Font properties and cosmetics of caption can also be customized using attributes, know more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" }, { "linkDesc": "You can also customize the alignment of the caption. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment" } ] }, { "annotationNumber": "2", "annotationName": "Subcaption", "annotationDesc": "The sub-caption (also called the chart subtitle) is the sub-heading of your chart. You can add custom text for sub-caption, as well as configure its font properties.", "annotationDescLinkPath": null, "leftPosition": "51.5%", "topPosition": "14.5%", "annotationLinks": [{ "linkDesc": "Learn how to add sub-caption ", "linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names" }, { "linkDesc": "Font properties and cosmetics of sub-caption can also be customized using attributes, learn more about them ", "linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties" } ] }, { "annotationNumber": "3", "annotationName": "Canvas Area", "annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.", "annotationDescLinkPath": null, "leftPosition": "62%", "topPosition": "20%", "annotationLinks": [{ "linkDesc": "You can customize border for canvas, learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border" }, { "linkDesc": "You can customize background color for canvas, as well as add gradient fill to it. Learn more about it ", "linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill" } ] }, { "annotationNumber": "4", "annotationName": "Data Plot", "annotationDesc": "Data plot refers to the columns of the column chart, lines in a line chart, pie/doughnut slices in a pie/doughnut chart.", "annotationDescLinkPath": null, "leftPosition": "46.5%", "topPosition": "52%", "annotationLinks": [{ "linkDesc": "You can customize the way your data plot looks using colors, gradients and hover effects using available attributes, learn more about their usage ", "linkPath": "/chart-guide/chart-configurations/data-plot" }] }, { "annotationNumber": "5", "annotationName": "Data Values", "annotationDesc": "Data values are plot values, i.e. values of each data plot (line, column, bar, pie) displayed on the chart. Learn more about it ", "annotationDescLinkPath": "/chart-guide/chart-configurations/data-values", "leftPosition": "59%", "topPosition": "58%", "annotationLinks": [] }, { "annotationNumber": "6", "annotationName": "Tooltip", "annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It denotes valuable information about the data plot hovered.", "annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names", "leftPosition": "53%", "topPosition": "32.5%", "annotationLinks": [{ "linkDesc": "You can customize padding, size and other properties of tooltip, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips" }, { "linkDesc": "You can also customize the text of tooltip and use values plotted on the chart using macros, learn more about it ", "linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros" } ] } ] } ] } }

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.

Smart Label configurations

Starting version 3.17.0, you can enable smart label configuration in order to aviod the congestion of labels difficulting the charts clearness. Smart labels are data connector lines which connect the pie slices to their respective labels without over-lapping even in cases where there are lots of labels congested. Use the the following properties to avoid labels from overlaping:

  • Set the value of useEllipsesWhenOverflow to automatically convert text labels on the axis to ellipsis in order to accomodate to the availablle space.
  • Set the value of skipOverlapLabels whenever there is an overlap of labels to skip them avoiding the congestion of data labels.
  • Set the value of autoRotateLabels to automatically rotate data labels to avoid overlapping.

Refer to the code below:

{
"chart": {

        "autoRotateLabels": "1",
        "skipOverlapLabels": "1"
        },
}

The chart will look like as shown below:

FusionCharts will load here..

Click here to edit the above chart.