Data display
Chart
A lightweight bar chart made with CSS and flexbox, no chart library, with one bar highlighted in the signature gradient.
- Source
- src/components/ui/chart.tsx
- Figma
- Chart · type (bars, line, area). In code: bars only (BarChart).
Usage
Included in the GliaKit boilerplate. Import it where you need it:
tsx
import { BarChart } from "@/components/ui/chart";When to use
- A compact monthly trend inside a dashboard card.
- Marketing and settings pages where pulling in a chart library is overkill.
- For line or area charts, axes, tooltips or many series: these are not implemented. Use a chart library such as Recharts.
- For progress toward a goal, use ProgressRow or Progress.
Examples
Highlight a bar
Pass highlightIndex to emphasize a specific bar, such as the current month.
With a text alternative
Bars have no text of their own. Wrap the chart in a figure with role="img" and a label that states the key numbers.
API reference
BarChart
Does not spread other props. The chart is 176px tall and bars scale against the largest value, up to 148px.
| Prop | Type | Default | Description |
|---|---|---|---|
| data | { month: string; value: number }[] | - | Required. One bar per item, labelled with month. month is used as the React key, so keep labels unique. Pass at least one non-zero value. |
| highlightIndex | number | - | Index of the bar drawn with the gradient. Defaults to the bar with the highest value. |
| className | string | - | Extra classes for the flex container, e.g. a different gap. |
Accessibility
- Bars are plain divs with no text alternative; only the month labels are read. Wrap the chart in a figure with role="img" and an aria-label that states the key numbers, or provide the data as an sr-only table.
- The highlighted bar is marked only by its gradient; describe what it means in nearby text, such as "Best month: November".