Population Pyramid Charts

Overview

Population pyramids can be modified to display as:

  • Vertical Bars
  • Horizontal Bars
  • Lines
  • Vertical Lines
  • Filled Lines (Area)
  • Vertical Filled Lines (Vertical Area)

Note: See our Population Pyramid Gallery for inspiration on all the different population pyramid possibilities.

Population Pyramid Chart Type

In your chart object, add a type attribute and set the value to pop-pyramid.

{
  type: 'pop-pyramid',
}

Data

Population pyramids accept data in the form of a series object array.

Data-Side and Values Array

Create a series object array of length 2. Within each object, set the data-side attribute to either 1 (left side) or 2 (right side), with no repeated numbers. 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]
    }
  ]
}

Chart-Specific Properties

Make chart-specific customizations and styling changes via the options object.

Aspects

The aspect of a population pyramid can be changed using the aspect attribute in the options object. The aspect value options for population pyramids are:

Value Description
hbar (default) Data is displayed as horizontal rectangular bars. Since it is the default aspect, specifying its type is optional.
bar Data is displayed as vertical rectangular bars
line Data is displayed as data points plotted on an x-y axis and connected by lines
vline Data is displayed as data points plotted on a flipped x-y axis and connected by lines
area Data is presented as connected data points on an x-y axis, with the region between data points and x-axis filled in
varea Data is presented as connected data points on a flipped x-y axis, with the region between the line and x-axis filled in
{
  type: "pop-pyramid",
  options: {
    aspect: "bar" // | "hbar" | "line" | "vline" | "area" | "varea"
  }
}

The following demo illustrates the different options available for population pyramids:

https://app.zingsoft.com/demos/embed/UCWFDBRO
https://app.zingsoft.com/demos/embed/UCWFDBRO

Side Styling

Within the options object, the side-1 and side-2 objects allow you to configure the various styling attributes and objects of each side of a population pyramid.

{
  options: {
    'side-1': {
      plotarea: {
        'background-color': "#D04347"
      }
    },
    'side-2': {
      plotarea: {
        'background-color': "#319CFC"
      }
    }
  }
}
https://app.zingsoft.com/demos/embed/8BB54ON0
https://app.zingsoft.com/demos/embed/8BB54ON0

Further Customization

Once you have your basic chart, you can customize and style it to fit your data visualization needs.

Legends/ Shared Legend

Enable and style a legend for each side of the population pyramid by creating a legend object in your chart object.

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.

Note: Learn more about legends with our [Legend Tutorial] (https://www.zingchart.com/docs/tutorials/elements/legend) and shared legends with our Shared Interactions Tutorial.

{
  legend: {
    shared: true // false
  }
}
https://app.zingsoft.com/demos/embed/C2QUF0LY
https://app.zingsoft.com/demos/embed/C2QUF0LY

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.

Note: Learn more about scale labels with our Scales Tutorial.

{
  type: "pop-pyramid",
  options: {
    'label-placement': "middle"
  },
}
https://app.zingsoft.com/demos/embed/8MWQ8Y5T
https://app.zingsoft.com/demos/embed/8MWQ8Y5T