BarChart
Token-native grouped/stacked bar chart (Recharts) reading DS dataviz tokens at runtime — FX volume by currency, payment counts by status, budget vs. actual, funding source stacks
import { BarChart } from "@danagraph/design-system/finance"Props
| Prop | Type | Default | Description |
|---|---|---|---|
datareq | Record<string, number | string>[] | — | Data rows |
xKeyreq | string | — | Key for x-axis category labels |
seriesreq | string[] | BarSeries[] | — | Series keys to plot — BarSeries objects allow label/color overrides |
variant | 'grouped' | 'stacked' | grouped | Bar layout |
title | string | — | Chart title |
asOf | string | — | As-of date shown right of the title |
height | number | 240 | Chart height in px |
showGrid | boolean | true | Show horizontal grid lines |
showLegend | boolean | false | Show series legend |
showLabels | boolean | — | Show values on bars when they fit — declared in the props contract but not yet rendered |
ariaLabel | string | — | Accessible label override (falls back to title) |
style | CSSProperties | — | Style override |
datarequiredRecord<string, number | string>[]Default —Data rows
xKeyrequiredstringDefault —Key for x-axis category labels
seriesrequiredstring[] | BarSeries[]Default —Series keys to plot — BarSeries objects allow label/color overrides
variant'grouped' | 'stacked'Default groupedBar layout
titlestringDefault —Chart title
asOfstringDefault —As-of date shown right of the title
heightnumberDefault 240Chart height in px
showGridbooleanDefault trueShow horizontal grid lines
showLegendbooleanDefault falseShow series legend
showLabelsbooleanDefault —Show values on bars when they fit — declared in the props contract but not yet rendered
ariaLabelstringDefault —Accessible label override (falls back to title)
styleCSSPropertiesDefault —Style override
Accessibility
- Wrapper renders role="group" and the chart role="img", both labelled from ariaLabel ?? title.
- Series colors come from the DS categorical dataviz palette (up to 8 series) and re-resolve on theme change.
- Pair the chart with a data table or figure caption for non-visual access to exact values.
Chart requires min 300px for legible axis labels. Wrap in overflow-x-auto.
This component was designed to express:
Explore Related
Side-by-side grouped bar chart for categorical comparison — budget vs. actual, entity-by-entity cash
Bidirectional bar chart from zero — FX net positions, budget variance, tornado sensitivity analysis
Multi-series SVG line chart for time-series and trend data — cash forecasts, FX history, AI confidence trends
Filled area chart for cumulative and stacked treasury data — liquidity buffers, stacked funding sources