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

Introduction to Pyramid Chart

Pyramid charts are used for comparison of data, e.g. sales data of a product for a year. A pyramid chart consists of various segments, each representing a data point. The height of the pyramid segment, with respect to the entire pyramid, depicts the value for a specific data point.

In this section, you will be introduced to the:

  • Basics of a pyramid chart

  • Salient features of a pyramid chart

Basics of a Pyramid Chart

As you know, each segment in a pyramid chart represents a dataset with the height of the segment representing the value for that dataset. To distinguish segments from one another, you can configure them individually for their background, border, etc. Adjacent to the pyramid segments, the label and value of that pyramid can be displayed.

A simple 2D pyramid chart 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',
    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>

Salient Features

Top