Population Pyramid Charts

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

https://app.zingsoft.com/demos/embed/SQ9IHIRV
https://app.zingsoft.com/demos/embed/SQ9IHIRV
{
  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

https://app.zingsoft.com/demos/embed/2VHKR2GL
https://app.zingsoft.com/demos/embed/2VHKR2GL
{
  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

https://app.zingsoft.com/demos/embed/4068N0WG
https://app.zingsoft.com/demos/embed/4068N0WG
{
  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

https://app.zingsoft.com/demos/embed/MQYOHIP2
https://app.zingsoft.com/demos/embed/MQYOHIP2
{
  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

https://app.zingsoft.com/demos/embed/0JY88JDD
https://app.zingsoft.com/demos/embed/0JY88JDD
{
  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

https://app.zingsoft.com/demos/embed/MO53363U
https://app.zingsoft.com/demos/embed/MO53363U
{
  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.

https://app.zingsoft.com/demos/embed/C2QUF0LY
https://app.zingsoft.com/demos/embed/C2QUF0LY
{
  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.

https://app.zingsoft.com/demos/embed/8BB54ON0
https://app.zingsoft.com/demos/embed/8BB54ON0
{
  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.

https://app.zingsoft.com/demos/embed/8MWQ8Y5T
https://app.zingsoft.com/demos/embed/8MWQ8Y5T
{
  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:

AttributeTypeValuesDetails
aspectString"area" | "varea" | "line" | "vline" | "bar" | "hbar"Sets the population pyramid aspect.
label-placementString"side" | "middle"Sets the placement of the scale labels.
side-1ObjectMixedSets object and styling options for the first side of the population pyramid.
side-2ObjectMixedSets 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.