To use the population pyramid, import these on top:

import { PopulationPyramid } from 'chartformers';
import 'chartformers/dist/chartformers.css';

Minimum call:

The chart must be called in a container with width and height set. It will then fill the available space of this container.

<div className="w-full h-60 md:h-96">
 <PopulationPyramid data={[]} />
</div>

The component currently only requires a mandatory data property, no other customizable props yet. This data is an array of objects with 3 properties:

• ageRange: string
• male: number
• female: number

Sample Data

const samplePopulation = [
{ ageRange: "0-4", male: 9120, female: 8210 },
{ ageRange: "5-9", male: 17780, female: 16640 },
// etc
]

the 'ageRange' property is up to your discretion, as long as it fulfill the required format, the chart will be rendered properly.

#Property Table