BarChart
A vertical bar chart for comparing values across categories, with optional stacking.
Installation
npx dafink-ui add bar-chartRequires: recharts
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| data | ChartDataPoint[] | - | Array of data objects. |
| xKey | string | - | Key to use as the x-axis label. |
| series | ChartSeries[] | - | Bar groups to render. |
| stacked | boolean | false | Stack series on top of each other. |
| height | number | 240 | Chart height in px. |
| showLegend | boolean | true | Whether to show the legend. |
| showGrid | boolean | true | Whether to show the background grid. |
| className | string | "" | Extra classes applied to the container. |
Accessibility
BarChart shares the same Recharts accessibility layer as the other charts: Tab focuses the SVG, ArrowLeft/ArrowRight step a shared tooltip across each category's bar group, and Enter pins it. Unlike the other four charts here, BarChart doesn't wrap its container in role="img"/aria-label — its accessible name instead comes from a title prop passed straight into Recharts, which renders it as the SVG's own <title>element ("Bar chart"). Hovering or keyboard-focusing a category also slightly darkens its bars; the legend is static, not clickable.