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
typeattribute. To render a multi-level pie chart, setmultilevelpie.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
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:
{
"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 & {br}Beverages" color="#f8bd19" value="55.5" tooltext="Food & 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 &{br}Accessories" color="#33ccff" value="42" tooltext="Apparel & 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 &{br}Grooming" color="#ffcccc" value="9.45" tooltext="Bath & 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
highlightParentPieSlicesto0to prevent child pie slices from getting highlighted, when you hover over the parent slices.Set the value of
highlightChildPieSlicesto1to 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:
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:
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:
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
showLabelto0to hide a label of a particular category. - Set the value of
showValueto0to 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:
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
useEllipsesWhenOverflowto automatically convert text labels on the axis to ellipsis in order to accomodate to the availablle space. - Set the value of
skipOverlapLabelswhenever there is an overlap of labels to skip them avoiding the congestion of data labels. - Set the value of
autoRotateLabelsto 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:
Click here to edit the above chart.