20% Off All Froala Plans

Days

Hours

Minutes

Seconds

x

Pyramid Chart

A pyramid chart is used to show the hierarchical structure as well as the quantity of data in a pyramid like structure. The chart is visualized like a pyramid that is made of various segments stacked together. A segment's height is determined by the data value that it represents. The width is determined by the segment's order in the stack of segments and has nothing to do with the data value. Segments can be sliced out in order to focus on a particular phase.

Caption

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. Learn more about it

Subcaption

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.

Data Plot

Data plot refers to the columns of the pyramid chart.

Data Values

Data values refers to values associated with each section.

Export menu that appears on top-right of the chart, it offers different options to export a chart.

You can enable or disable chart export using attribute exportEnabled. Refer to Exporting Charts to learn more.

Create a Pyramid Chart

For a detailed list of attributes, refer to the Pyramid Chart attributes page.

CHART

JSON

{
  "chart": {
    "caption": "Bilateral Trade Volume, 2013",
    "subcaption": "A Horizontal Sankey with options to configure the flow representation",
    "theme": "froala",
    "orientation": "horizontal",
    "linkalpha": 30,
    "linkhoveralpha": 60,
    "nodelabelposition": "start"
  },
  "nodes": [
    {
      "label": "Netherlands"
    },
    {
      "label": "Canada"
    },
    {
      "label": "Belgium"
    },
    {
      "label": "Italy"
    },
    {
      "label": "Mexico"
    },
    {
      "label": "Russia"
    },
    {
      "label": "Spain"
    },
    {
      "label": "South Korea"
    },
    {
      "label": "Germany"
    },
    {
      "label": "China"
    },
    {
      "label": "European Union"
    },
    {
      "label": "Japan"
    },
    {
      "label": "United Kingdom"
    },
    {
      "label": "United States"
    },
    {
      "label": "France"
    },
    {
      "label": "Hong Kong"
    },
    {
      "label": "Switzerland"
    },
    {
      "label": "Austria"
    },
    {
      "label": "Sweden"
    }
  ],
  "links": [
    {
      "from": "Netherlands",
      "to": "European Union",
      "value": 798744
    },
    {
      "from": "Germany",
      "to": "European Union",
      "value": 1468990
    },
    {
      "from": "European Union",
      "to": "France",
      "value": 745931
    },
    {
      "from": "European Union",
      "to": "United States",
      "value": 660541
    },
    {
      "from": "Canada",
      "to": "United States",
      "value": 594546
    },
    {
      "from": "Belgium",
      "to": "European Union",
      "value": 628796
    },
    {
      "from": "China",
      "to": "Hong Kong",
      "value": 400571
    },
    {
      "from": "China",
      "to": "United States",
      "value": 526454
    },
    {
      "from": "European Union",
      "to": "United Kingdom",
      "value": 520318
    },
    {
      "from": "China",
      "to": "European Union",
      "value": 560536
    },
    {
      "from": "Italy",
      "to": "European Union",
      "value": 539556
    },
    {
      "from": "Mexico",
      "to": "United States",
      "value": 492715
    },
    {
      "from": "Russia",
      "to": "European Union",
      "value": 385778
    },
    {
      "from": "Spain",
      "to": "European Union",
      "value": 365191
    },
    {
      "from": "China",
      "to": "Japan",
      "value": 312062
    },
    {
      "from": "European Union",
      "to": "Switzerland",
      "value": 328609
    },
    {
      "from": "South Korea",
      "to": "China",
      "value": 229073
    },
    {
      "from": "European Union",
      "to": "Austria",
      "value": 244913
    },
    {
      "from": "Japan",
      "to": "United States",
      "value": 206091
    },
    {
      "from": "European Union",
      "to": "Sweden",
      "value": 204849
    },
    {
      "from": "Germany",
      "to": "United States",
      "value": 184287
    }
  ]
}

HTML

<html>

<head>
      <title>My first chart using FroalaCharts</title>
     

  <script src=https://unpkg.com/[email protected]/froalacharts.js></script>
  <script src="https://unpkg.com/[email protected]/themes/froalacharts.theme.froala.js"></script> 

  <script type="text/javascript">   
       var data = {  
        chart: {
    theme: "froala",
    is2D: "1",
    caption: "The Global Wealth Pyramid",
    subcaption: "Credit Suisse 2017",
    showvalues: "1",
    numbersuffix: " trn",
    numberprefix: "$",
    plottooltext:
      "$label of world population owns $dataValue of global wealth"
  },
  data: [
    {
      label: "Top 32M",
      value: "128.7"
    },
    {
      label: "Next 391M",
      value: "111.4"
    },
    {
      label: "Next 1054M",
      value: "32.5"
    },
    {
      label: "Last 3474M",
      value: "7.6"
    }
  ]
};       

FroalaCharts.ready(function () {
            froalacharts = new FroalaCharts({
                id: "chart_1",
                type: 'pyramid',
                renderAt: 'ft',
                width: '800',
                height: '500',
                dataSource: data
            });
            froalacharts.render();
        });
    </script>
    
</head>


<div id="msg" class="mb-20"> Chart data in the selected format will be displayed here.</div>

<body>
    <div id="ft">FroalaCharts will render here</div>
</body>

</html>