Pyramid

Centered pyramid distribution — one row per zone with width proportional to value. Self-contained SVG.

Primitive: ChartPyramid· Standalone (no ChartRoot needed)

Interactive demo

Usage

import { ChartPyramid } from '@ramtt/charts'

<ChartPyramid
  data={[
    { label: 'Z1', value: 60, color: 'var(--chart-1)' },
    { label: 'Z2', value: 30, color: 'var(--chart-2)' },
  ]}
/>

Props

Prop	Type	Default	Description
data*	`PyramidItem[]`	—	Rows ({ label, value, color? })
width	`number`	480	Width in px
height	`number`	320	Height in px
colors	`string[]`	—	Default colors when item.color is not set
gap	`number`	6	Gap between rows in px
minBarFrac	`number`	0.05	Minimum bar width fraction so smallest zone stays visible
valueFormat	`(value: number) => string`	—	Right-side readout formatter (default: "N min")