Creating a Simple Pyramid Chart

As an example, we will create the Global Wealth Pyramid (Credit Suisse 2013) - a pyramid chart that visualizes how the world’s wealth is broken.

To create a pyramid chart, you will first need to plot the data that will be represented by the chart. For our example, this data is shown in the table below:

Number of People	Wealth owned (In trillion USD)
Top 32 mn (0.7%)	98.7
Next 361 mn (7.7%)	101.8
Next 1.1 bn (22.9%)	33.0
Last 3.2 bn (68.7%)	7.3

We will configure the “Number of People” as the label of the chart and the “Wealth Owned” as the value of the chart. The resultant Global Wealth Pyramid chart looks like this:

Chart
JSON
XML
HTML

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',
    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 attributes used to create the Global Wealth Pyramid chart:

Attribute Name	Description
`value`	It is used to show the numerical value for the data represented by a pyramid segment. For example, for the slice representing the “Next 361 mn (7.7%)” people, the value will be 101.8. This attribute belongs to the `data` object.
`label`	It is used to specify the label to be be rendered for a pyramid segment, e.g. “Last 3.2 bn (68.7%)”. This attribute belongs to the `data` object.