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.

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

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

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/tutorials/elements/legend) and shared legends with our Shared Interactions Tutorial.

{
  legend: {
    shared: true // false
  }
}

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