Charts

Bar Chart

Grouped or stacked columns. Default and Motion variants.

Examples

Default

Cronus grouped columns. Pass stacked for a stacked series.

tsx

<BarChart data={MONTHS} series={[{ key: "revenue", label: "Revenue" }, { key: "profit", label: "Profit" }]} />

Stacked

Desktop and mobile on one column.

tsx

<BarChart data={MONTHS} stacked series={[{ key: "desktop", label: "Desktop" }, { key: "mobile", label: "Mobile" }]} />

Motion

Grouped revenue and profit — hover dims the rest.

tsx

import { BarChart, Bar, BarXAxis, Grid, ChartTooltip } from "@cronus-ui/ui/charts";

<BarChart data={data} xDataKey="month">
  <Grid horizontal />
  <Bar dataKey="revenue" fill="var(--chart-line-primary)" lineCap="round" />
  <Bar dataKey="profit" fill="var(--chart-line-secondary)" lineCap="round" />
  <BarXAxis />
  <ChartTooltip />
</BarChart>

Motion stacked

Stacked desktop and mobile with a gap between segments.

tsx

<BarChart data={data} stacked stackGap={3} xDataKey="month">
  <Bar dataKey="desktop" fill="var(--chart-line-primary)" lineCap={4} stackGap={3} />
  <Bar dataKey="mobile" fill="var(--chart-line-secondary)" lineCap={4} stackGap={3} />
  <BarXAxis />
  <ChartTooltip />
</BarChart>

Installation

Default is a ready-made wrapper from the registry. Motion is the composable engine at @cronus-ui/ui/charts (peer visx + motion).

bash

npx cronus-ui add bar-chart

tsx

import { BarChart } from "@cronus-ui/ui";

Usage

Grouped is the default. `stacked` + `stackGap` stacks segments. `orientation="horizontal"` swaps axes (use BarYAxis). Hover dims other columns via fadedOpacity (0.22).

tsx

import { BarChart, Bar, BarXAxis, Grid, ChartTooltip } from "@cronus-ui/ui/charts";

<BarChart data={data} xDataKey="month">
  <Grid horizontal />
  <Bar dataKey="revenue" fill="var(--chart-line-primary)" lineCap="round" />
  <Bar dataKey="profit" fill="var(--chart-line-secondary)" lineCap="round" />
  <BarXAxis />
  <ChartTooltip />
</BarChart>

Components

Motion API — compose these under the chart root. Default wrapper props are in Default API below.

BarChart

Categorical root: grouped or stacked, vertical or horizontal.

Prop	Type	Default	Description
`data`*	`Record<string, unknown>[]`	—	Rows with a category key and numeric series.
`xDataKey`	`string`	`"name"`	Category key.
`orientation`	`"vertical" \| "horizontal"`	`"vertical"`	Bar direction.
`stacked`	`boolean`	`false`	Stack series instead of grouping.
`stackGap`	`number`	`0`	Gap between stacked segments in px.
`barGap`	`number`	`0.2`	Gap between groups as a fraction of band width.
`barWidth`	`number`	—	Fixed bar width in px. Auto-sizes when omitted.
`aspectRatio`	`string`	`"2 / 1"`	CSS aspect ratio.
`squareSnap`	`{ squareGap, groupGap?, fit? }`	—	Tooltip snap when using BarSquares.

Bar

One series of columns. Round caps, hover dim, optional 3D perspective trim.

Prop	Type	Default	Description
`dataKey`*	`string`	—	Value key.
`fill`	`string`	`var(--chart-line-primary)`	Solid color, gradient, or pattern url.
`lineCap`	`"round" \| "butt" \| number`	`"round"`	End cap or custom radius.
`animationType`	`"grow" \| "fade"`	`"grow"`	Enter animation.
`fadedOpacity`	`number`	`0.22`	Opacity when another bar is hovered.
`stackGap`	`number`	`0`	Gap between stacked segments in px.
`perspective`	`boolean`	`false`	Trim the front face to meet BarDepthBack.

BarSquares

Shape variant: a vertical stack of discrete squares instead of a continuous Bar. Grouped vertical charts only.

Prop	Type	Default	Description
`dataKey`*	`string`	—	Value key.
`squareGap`	`number`	`3`	Gap between squares in px.
`squareRadius`	`number`	`0.25`	Corner radius as a fraction of size (0–0.5).
`useGradient`	`boolean`	`false`	Bar-spanning gradient from gradientStops.
`patternPreset`	`PatternPresetId`	—	Pattern when fill is a pattern url.

BarXAxis

Category labels for vertical charts. Fades under the hover ticker.

Prop	Type	Default	Description
`tickerHalfWidth`	`number`	`50`	Fade radius.
`maxLabels`	`number`	`12`	Cap on labels for dense data.

BarYAxis

Category labels for horizontal charts.

Prop	Type	Default	Description
`showAllLabels`	`boolean`	`true`	Do not skip labels.
`maxLabels`	`number`	`20`	Cap on labels.

Grid

Plot-area grid lines. Horizontal by default; optional shimmer while loading.

Prop	Type	Default	Description
`horizontal`	`boolean`	`true`	Show horizontal lines.
`vertical`	`boolean`	`false`	Show vertical lines.
`numTicksRows`	`number`	`5`	Horizontal line count.
`numTicksColumns`	`number`	`10`	Vertical line count.
`stroke`	`string`	`var(--chart-grid)`	Line color while ready.
`strokeDasharray`	`string`	`"4,4"`	Dash pattern.
`shimmer`	`boolean`	`false`	Animate a band across horizontal lines.
`highlightRowValues`	`number[]`	—	Rows drawn with alternate styling (e.g. zero).

Background

Pattern fill for the plot area when you omit Grid, or as a texture behind series.

Prop	Type	Default	Description
`pattern`	`PatternPresetId \| "none"`	—	Pattern preset. `none` renders nothing.
`color`	`string`	`var(--chart-grid)`	Pattern stroke color.
`opacity`	`number`	`1`	Pattern fill opacity.
`fadeHorizontal`	`boolean`	`true`	Fade at left/right edges.

ChartTooltip

Motion tooltip: crosshair, series dots, floating panel, optional date pill. This is not the recharts ChartTooltip from `@cronus-ui/ui`.

Prop	Type	Default	Description
`showDatePill`	`boolean`	`true`	Animated date ticker on the x-axis.
`showCrosshair`	`boolean`	`true`	Vertical crosshair.
`showDots`	`boolean`	`true`	Dots on series at the hovered x.
`dotVariant`	`"dot" \| "ring"`	`"dot"`	Filled circle or ring.
`indicatorColor`	`string \| (point) => string`	—	Crosshair and dot color.
`indicatorDasharray`	`string`	—	Dash pattern for the crosshair.
`indicatorFadeEdges`	`"both" \| "top" \| "bottom" \| "none"`	`"both"`	Vertical crosshair fade.
`matchCrosshair`	`boolean`	`false`	Panel uses the crosshair spring when true.
`damping`	`number`	`20`	Panel follow when matchCrosshair is false. 0 = instant.
`content`	`(props) => ReactNode`	—	Custom tooltip renderer.
`rows`	`(point) => TooltipRow[]`	—	Custom row generator.

Stacked

Set stacked on the root and stackGap on each Bar. lineCap as a number keeps a consistent radius on segments.

tsx

<BarChart data={data} xDataKey="month" stacked>
  <Bar dataKey="desktop" fill="var(--chart-line-primary)" lineCap={4} stackGap={3} />
  <Bar dataKey="mobile" fill="var(--chart-line-secondary)" lineCap={4} stackGap={3} />
  <BarXAxis />
  <ChartTooltip />
</BarChart>

Horizontal

orientation="horizontal" draws bars from the left. Use BarYAxis for category labels.

tsx

<BarChart data={data} xDataKey="month" orientation="horizontal">
  <Bar dataKey="revenue" lineCap="round" />
  <BarYAxis />
  <ChartTooltip />
</BarChart>

Data format

const data = [
  { month: "Jan", revenue: 12000, profit: 4500 },
  { month: "Feb", revenue: 15500, profit: 5200 },
];

Theming

Motion charts read `--chart-*` aliases that map onto Cronus semantic tokens (`--cronus-chart-1`…`--cronus-chart-5`, `--cronus-border`, `--cronus-fg`, surfaces). Override the aliases or the tokens — never palette scales (`bg-zinc-900`). Default wrappers use `ChartConfig` with `var(--cronus-chart-*)` / `var(--cronus-primary)`.

Full token reference: Theming.

Dependencies

Default needs the recharts peer. Motion needs visx (and sometimes d3) as optional peers — install only what this chart uses.

bash

bun add recharts

bash

bun add @visx/curve @visx/responsive @visx/scale @visx/shape motion react-use-measure @visx/gradient @visx/pattern

Default API

Generated from the Default wrapper's exported types. Motion subcomponents are documented above.

BarChartProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`data`*	`Record<string, unknown>[]`	—	—
`xKey`	`string`	`"month"`	—
`series`*	`ChartSeries[]`	—	—
`stacked`	`boolean`	`false`	—
`formatValue`	`(value: number, name: string) => string`	—	—