FusionCharts Logo
FusionCharts Suite v3.11.0
Get Support
Version History
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

Loading

Configuring Pyramid Chart

FusionCharts Suite XT allows you to configure several functional and cosmetic properties for pyramid charts.

In this section, you will be shown how you can:

  • Draw a 2D pyramid with customized border properties

  • Show labels at the center of the chart

  • Show labels in the legend of the chart

  • Set the position of the legend box

  • Show values as percentage

  • Slice out individual pyramid slices

  • Configure hover effects

Drawing a 2D Pyramid with Customized Border Properties

By default, a pyramid chart renders as a 3D chart with a context menu that allows you to switch between the 2D and 3D modes of display. However, you can configure a pyramid chart to be rendered in the 2D mode when it first loads, without using the context menu. You can also customize the border properties of a pyramid chart for an improved visual representation.

A pyramid chart rendered in 2D mode with customized border properties looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40", "isSliced": "0", "showPlotBorder": "1", "plotBorderThickness": "1", "plotBorderAlpha": "100", "plotBorderColor": "#333333" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40",
        "isSliced": "0",
        "showPlotBorder": "1",
        "plotBorderThickness": "1",
        "plotBorderAlpha": "100",
        "plotBorderColor": "#333333"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-1',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40",
            "is2D": "1",
            "isSliced": "0",
            "showPlotBorder": "1",
            "plotBorderThickness": "1",
            "plotBorderAlpha": "100",
            "plotBorderColor": "#333333"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to render a 2D pyramid chart with customized border properties:

Attribute Name Description

is2D

It is used to specify whether the pyramid chart, on loading, will be rendered in the 2D mode. Setting this attribute to 1 renders the chart in 2D, setting it to 0 (default) will render the chart in 3D.

showPlotBorder

It is used to specify whether the plot border will be shown. Setting this attribute to 1 shows the plot border, setting it to 0 (default) hides it.

plotBorderColor

It is used to specify the hex code of the color that will be used to render the plot border, e.g. #333333.

plotBorderThickness

It is used to specify the thickness, in pixels, of the plot border, e.g. 3.

plotBorderAlpha

It is used to specify the transparency of the plot border. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 50.

Showing Labels at the Center of the Chart

A pyramid chart configured to render labels at the center looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "showLabelsAtCenter": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "showLabelsAtCenter": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-2',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "showLabelsAtCenter": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }

}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to render labels at the center:

Attribute Name Description

showLabelsAtCenter

It is used to specify whether the data labels should be shown in the center of the data plots. Setting this attribute to 1 will show the labels in the center, setting it to 0 (default) will show them on the right.

Showing Labels in the Legend of the chart

You can opt to show the labels in the legend box instead of showing them with the data plots. To do this, you will have to show the legend box and hide the labels for the data plots.

A pyramid chart with the labels rendered in the legend box looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40", "showlegend": "1", "showlabels": "0" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40",
        "showlegend": "1",
        "showlabels": "0"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-3',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40",
            //Setting the legend visibility to true
            "showlegend": "1",
            //Hiding chart labels
            "showlabels": "0"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to show labels in the legend:

Attribute Name Description

showLegend

It is used to specify whether the legend box will be shown for the chart. Setting this attribute to 1 will show the legend box, setting it to 0 (default) will hide it.

showLabels

It is used to specify whether the labels will be shown. Setting this attribute to 0 will hide the labels, setting it to 1 (default) will show them.

Configuring the Position of the Legend Box

By default, the legend box is placed at the bottom of the pyramid chart. You can opt to change the position of the legend box and shift it to the right.

A pyramid chart with the legend box positioned to the right looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "0", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40", "showLabels": "0", "showLegend": "1", "legendPosition": "RIGHT" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "0",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40",
        "showLabels": "0",
        "showLegend": "1",
        "legendPosition": "RIGHT"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-4',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "0",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40",
            "showLabels": "0",
            "showLegend": "1",
            "legendPosition": "RIGHT"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to configure the position of the legend box:

Attribute Name Description

legendPosition

It is used to specify the position of the legend box in the chart. Setting this attribute to RIGHT places the legend box to the right, setting it to BOTTOM (default) places it at the bottom.

Showing Values as Percentage

A pyramid chart configured to show percent values instead of numerical values looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-5',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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

Attribute Name Description

showPercentValues

It is used to specify whether the data values on the chart will be shown as percentage values or numerical values. Setting this attribute to 1 renders the data values as percent values, setting it to 0 (default) renders them as numerical values.

Slicing Out Individual Pyramid Slices

A pyramid chart rendered with each slice sliced out looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionPadding": "25", "captionOnTop": "0", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40", "isSliced": "1" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionPadding": "25",
        "captionOnTop": "0",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40",
        "isSliced": "1"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-6',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionPadding": "25",
            "captionOnTop": "0",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40",
            //Slicing out the pyramid slices
            "isSliced": "1"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attribute used to slice out the pyramid slices:

Attribute Name Description

isSliced

It is used to specify whether the pyramid slices will appear sliced out. Setting this attribute to 1 will slice out slices, setting it to 0 (default) will not slice out the slices.

If this attribute is used as a part of the chart object, it is applicable to all slices of the pyramid. If it is used as a part of the data object, then it is applicable only to the slice(s) for which it is defined.

Configuring Hover Effects

A pyramid chart with hover effects enabled looks like this:

FusionCharts will load here..
{ "chart": { "theme": "fint", "caption": "The Global Wealth Pyramid", "captionOnTop": "0", "captionPadding": "25", "alignCaptionWithCanvas": "1", "subcaption": "Credit Suisse 2013", "subCaptionFontSize": "12", "borderAlpha": "20", "is2D": "1", "bgColor": "#ffffff", "showValues": "1", "numberPrefix": "$", "numberSuffix": "M", "plotTooltext": "$label of world population is worth USD $value tn ", "showPercentValues": "1", "chartLeftMargin": "40", "isSliced": "1", "showPlotBorder": "1", "plotBorderColor": "#333333", "showHoverEffect": "1", "hoverColor": "#cccccc", "hoverAlpha": "75", "borderHoverColor": "#aa0000", "borderHoverAlpha": "100", "borderHoverThickness": "3" }, "data": [ { "label": "Top 32 mn (0.7%)", "value": "98.7" }, { "label": "Next 361 mn (7.7%)", "value": "101.8" }, { "label": "Next 1.1 bn (22.9%)", "value": "33" }, { "label": "Last 3.2 bn (68.7%)", "value": "7.3" } ] }
{
    "chart": {
        "theme": "fint",
        "caption": "The Global Wealth Pyramid",
        "captionOnTop": "0",
        "captionPadding": "25",
        "alignCaptionWithCanvas": "1",
        "subcaption": "Credit Suisse 2013",
        "subCaptionFontSize": "12",
        "borderAlpha": "20",
        "is2D": "1",
        "bgColor": "#ffffff",
        "showValues": "1",
        "numberPrefix": "$",
        "numberSuffix": "M",
        "plotTooltext": "$label of world population is worth USD $value tn ",
        "showPercentValues": "1",
        "chartLeftMargin": "40",
        "isSliced": "1",
        "showPlotBorder": "1",
        "plotBorderColor": "#333333",
        "showHoverEffect": "1",
        "hoverColor": "#cccccc",
        "hoverAlpha": "75",
        "borderHoverColor": "#aa0000",
        "borderHoverAlpha": "100",
        "borderHoverThickness": "3"
    },
    "data": [
        {
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        },
        {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        },
        {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        },
        {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'pyramid',
    renderAt: 'chart-container',
    id: 'wealth-pyramid-chart-7',
    width: '500',
    height: '400',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "theme": "fint",
            "caption": "The Global Wealth Pyramid",
            "captionOnTop": "0",
            "captionPadding": "25",
            "alignCaptionWithCanvas": "1",
            "subcaption": "Credit Suisse 2013",
            "subCaptionFontSize": "12",
            "borderAlpha": "20",
            "is2D": "1",
            "bgColor": "#ffffff",
            "showValues": "1",
            "numberPrefix": "$",
            "numberSuffix": "M",
            "plotTooltext": "$label of world population is worth USD $value tn ",
            "showPercentValues": "1",
            "chartLeftMargin": "40",
            "is2D": "1",
            "isSliced": "1",
            "showPlotBorder": "1",
            "plotBorderColor": "#333333",
            //Customizing hover effects
            "showHoverEffect": "1",
            "hoverColor": "#cccccc",
            "hoverAlpha": "75",
            "borderHoverColor": "#aa0000",
            "borderHoverAlpha": "100",
            "borderHoverThickness": "3"
        },
        "data": [{
            "label": "Top 32 mn (0.7%)",
            "value": "98.7"
        }, {
            "label": "Next 361 mn (7.7%)",
            "value": "101.8"
        }, {
            "label": "Next 1.1 bn (22.9%)",
            "value": "33"
        }, {
            "label": "Last 3.2 bn (68.7%)",
            "value": "7.3"
        }]
    },
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the attributes used to configure the hover effects:

Attribute Name Description

showhovereffect

It is used to specify whether the hover effect will be enabled for the chart. Setting this attribute to 1 will enable the hover effect, setting it to 0 (default) will disable it.

hoverColor

It is used to specify the hex code of the color that will be used to fill the slice when the mouse pointer is hovered over it, e.g., #CCCCCC.

hoverAlpha

It is used to specify the transparency of the slice when the mouse pointer is hovered it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 100.

borderHoverColor

It is used to specify the hex code of the color that will be used to render the plot border when the mouse pointer is hovered over it, e.g., #333333.

borderHoverAlpha

It is used to specify the transparency of the slice border when the mouse pointer is hovered it. This attribute takes values between 0 (transparent) and 100 (opaque), e.g. 60.

borderHoverThickness

It is used to specify the thickness, in pixels, of the slice border when the mouse pointer is hovered over it, e.g. 2.
Top