Population Pyramid

Preview

Loading…

Installation

CLI

npx @sonojs/ui@latest add population-pyramid

Also needsnpx @sonojs/ui@latest add chart chart-styles && npm i recharts

Usage

import

import PopulationPyramidDemo from "@/components/charts/population-pyramid"

page.tsx

export default function Page() {
  return <PopulationPyramidDemo />
}

Scrub

scrub highlights the active category and dims the rest (default true). Pass false to keep the idle last-category view.

scrub

import { PopulationPyramid } from "@/components/charts/population-pyramid"

export default function Page() {
  return <PopulationPyramid scrub={false} />
}

Plot direction

plotDir swaps Male/Female sides. Default ltr keeps Male left and Female right (plot does not follow page dir). Header and legend still inherit page direction.

plotDir

import { PopulationPyramid } from "@/components/charts/population-pyramid"

export default function Page() {
  return (
    <div dir="rtl">
      {/* Chrome RTL · Male still left / Female right */}
      <PopulationPyramid />
      {/* Swap sides */}
      <PopulationPyramid plotDir="rtl" />
    </div>
  )
}

Props

Prop	Type	Default	Description
scrub	boolean	true	Hover, touch, and keyboard scrub — dim inactive categories and update the metric header.
plotDir	"ltr" · "rtl"	"ltr"	Male/Female sides. Default "ltr" (Male left). Pass "rtl" to swap. Header/legend follow page dir.