Skip to content
Get Pro
Comparison

Pyramid

A population (butterfly) chart: two sides grow outward from a centre spine that carries the age bands, oldest on top.

$149 once · every Pro piece

Customize

A comparison year sits behind the bars as borderless ghost fills, so growth reads as bar beyond ghost and decline as ghost beyond bar. The median band is marked on the spine by the one hot caret. Point at a row or step with the arrow keys: both sides stay while the rest step back, the band label brightens and each side's value sits in a pill at the end of its bar. Switching the year morphs every bar over 500ms.

Install

npx shadcn@latest add @obsyde/pyramid

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { Pyramid } from '@/components/obsyde/ember/pyramid/Pyramid';

export function Example() {
  return (
    <Pyramid />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/pyramid/Pyramid.tsxcomponent
  • ember/pyramid/pyramid.cssstyles
  • ember/pyramid/PyramidDemo.tsxdemo
  • ember/viz-kit/viz-kit.cssshared
  • ember/viz-kit/Tooltip.tsxshared
  • ember/viz-kit/focus.tsshared
  • ember/viz-kit/patterns.tsxshared
  • ember/viz-kit/roll.tsshared
  • ember/shared/rolling-number.cssshared
  • ember/shared/spring.tsshared
  • ember/shared/accent.tsshared
  • ember/viz-kit/scale.tsshared
  • ember/viz-kit/motion.tsshared
  • ember/viz-kit/chart.tsxshared
  • ember/shared/ember.cssshared
  • ember/viz-kit/touch.tsshared
  • ember/viz-kit/keyboard.tsshared
  • ember/viz-kit/size.tsshared
  • ember/viz-kit/States.tsxshared
  • ember/viz-kit/shape.tsshared
  • ember/viz-kit/marks.tsxshared
  • ember/viz-kit/Legend.tsxshared
  • ember/viz-kit/demo.tsxshared
  • ember/viz-kit/demo.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
yearYear'2005' | '2015' | '2025''2025'
yearSwitchYear switchbooleanfalse
compareComparebooleantrue
unitUnit'percent' | 'count''percent'
medianMedian caretbooleantrue
bandsBands'five' | 'ten''five'
legendLegend'row' | 'none''row'
tooltipTooltip'pill' | 'panel' | 'none''pill'
patternPattern'none' | 'diagonal-up' | 'diagonal-down' | 'dots' | 'vertical' | 'crosshatch''none'
backgroundBackground'grid' | 'none''grid'
statusStatus'ready' | 'loading' | 'empty''ready'
seedSeednumber2