Charts

BarChart

Compare categories: grouped or stacked, vertical or horizontal, with values on the bars.

Ant Design: Column, Bar (Ant Charts)

import { BarChart } from '@alea/ui';

Examples

Compare two years per quarter.

Revenue (k$)

2026 beat 2025 in every quarter.

Long category names read better horizontally; values on the bars.

Users by plugin

Compare amounts across categories: grouped, stacked or horizontal (MUI BarChart, Mantine BarChart).

Prop	Type	Default	Description
`data`required	`ChartRow[]`	-	Rows of data, one per x value or category.
`series`required	`Series[]`	-	The series to draw: key in each row, label for the legend, optional color.
`x`required	`string`	-	The key for the x axis (dates, months, categories).
`className`	`string`	-	Extra class names for the root element.
`description`	`ReactNode`	-	One sentence on what the data shows; read before the chart.
`height`	`number`	`260`	Plot height in px. Default 260.
`horizontal`	`boolean`	-	Bars go sideways (good for long category names).
`showTable`	`boolean`	`true`	Shows the table toggle. Default true.
`showValues`	`boolean`	-	Show the value on each bar.
`stacked`	`boolean`	-	Stack the series in one bar.
`title`	`ReactNode`	-	The title shown above it and read by screen readers.
`valueFormat`	`((v: number) => string)`	-	Formats values (axis, tooltip, table).
`xFormat`	`((x: string \| number) => string)`	-	Formats x labels.

Key	Does
`Arrow keys`	Read each category

Don't