Bar chart

Vertical bars from data array. Supports per-bar coloring, rounded corners, and highlight.

Primitive: ChartBar

Interactive demo

Usage

import { ChartRoot, ChartBar, ChartAxisY } from '@ramtt/charts'

<ChartRoot data={[40, 65, 30, 80, 55]} height={200}>
  <ChartBar className="fill-[var(--n1150)]" radius={3} gap={2} />
  <ChartAxisY />
</ChartRoot>

Props

PropTypeDefaultDescription
gapnumber1Gap between bars in pixels
radiusnumber0Corner radius
colorFn(value, index) => stringPer-bar color function
highlightIndexnumber | nullHighlighted bar index
classNamestringDefault bar fill class