Show Nav

JavaScript Population Pyramids

Overview

A population pyramid is a graphical representation showing the distribution of various age groups in a population.

Data Format

Number Array

Create a "series" object array of length 2. Within each object, set the "data-side" attribute to either 1 or 2 (without repeating). Set each side's values within the "values" array. Set the scale values within the "scale-x" object.

{
  "type":"pop-pyramid",
  "scale-x":{
    "values":["0-9", "10-19", "20-29", ...] // Array of strings or numbers
  },
  "series":[ // Length 2 array of objects
    {
      "data-side": 1, // 1 || 2
      "values": [val1, val2, ..., valN] // Array of numbers
    },
    {
      "data-side": 2,
      "values": [val1, val2, ..., valN] 
    }
  ]
}

Aspects

The aspect of a population pyramid can be changed using the "aspect" attribute in the "options" object. The following chart type strings are valid values for "aspect":

hbar | bar | area | varea | line | vline

The default value of the "aspect" option is hbar.

hbar

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

bar

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "aspect": "bar"
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

area

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "aspect": "area"
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

varea

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "aspect": "varea"
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

line

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "aspect": "line"
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

vline

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "aspect": "vline"
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

Data Configuration

Configure series object with a "values" array and a "data-side" option with the values 1 or 2 to configure which side each data set is placed on. At least two series objects are required.

"series" : [
  {
    "data-side" : 1,
    "text":"Male",
    "values" : [1656154, 1787564, 1981671, ... ]
  },
  {
    "data-side" : 2,
    "text":"Female",
    "values" : [1656154, 1787564, 1981671, ... ]
  }
]

Shared Legend

Setting "shared":true in the "legend" object merges the legend items of the plot objects from both sides into a single, shared legend object. Omitting the "shared" attribute, or setting it to false will keep the legend items from each side in their own legend objects.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "legend": {
    "shared": true
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

Side Styling

The "side-1" and "side-2" objects allow you to configure the various styling attributes and objects of each of the sides of a population pyramid.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "side-1":{
      "plotarea":{
        "background-color":"#D04347"
      }
    },
    "side-2":{
      "plotarea":{
        "background-color":"#319CFC"
      }
    }
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

Label Placement

Scale labels can be placed in two places in a population pyramid. By default, labels are duplicated on both sides of a population pyramid ("label-placement":"side"). Setting "label-placement":"middle" will place the labels between the two sides of the population pyramid.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type": "pop-pyramid",
  "options": {
    "label-placement": "middle"
  },
  /* Objects omitted for brevity */
  "series": [
    {
      "data-side": 1,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ]
    },
    {
      "data-side": 2,
      "values": [1656154, 1787564, /* Values omitted for brevity */ ] 
    }
  ]
}

Options

The "options" object accepts the following:

Attribute Type Values Details
aspect String "area" | "varea" | "line" | "vline" | "bar" | "hbar" Sets the population pyramid aspect.
label-placement String "side" | "middle" Sets the placement of the scale labels.
side-1 Object Mixed Sets object and styling options for the first side of the population pyramid.
side-2 Object Mixed Sets object and styling options for the second side of the population pyramid.

Summary

Got a question about how population pyramid charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.