Chart
Recharts wrapper with consistent theming, tooltip, and legend. Supports all chart types.
Install
Import path
Examples
Example
Build your chart using Recharts components and the chart container.
Add an Axis
<BarChart accessibilityLayer data={chartData}> <CartesianGrid vertical={false} /> <XAxis dataKey='month' tickLine={false} tickMargin={10} axisLine={false} tickFormatter={(value) => value.slice(0, 3)} /> <Bar dataKey='desktop' fill='var(--color-desktop)' radius={4} /> <Bar dataKey='mobile' fill='var(--color-mobile)' radius={4} /> </BarChart>
Add a Grid
<BarChart accessibilityLayer data={chartData}> <CartesianGrid vertical={false} /> <Bar dataKey='desktop' fill='var(--color-desktop)' radius={4} /> <Bar dataKey='mobile' fill='var(--color-mobile)' radius={4} /> </BarChart>
Add Legend
<BarChart accessibilityLayer data={chartData}> <CartesianGrid vertical={false} /> <XAxis dataKey='month' tickLine={false} tickMargin={10} axisLine={false} tickFormatter={(value) => value.slice(0, 3)} /> <ChartTooltip content={<ChartTooltipContent />} /> <ChartLegend content={<ChartLegendContent />} /> <Bar dataKey='desktop' fill='var(--color-desktop)' radius={4} /> <Bar dataKey='mobile' fill='var(--color-mobile)' radius={4} /> </BarChart>
Add Tooltip
<BarChart accessibilityLayer data={chartData}> <CartesianGrid vertical={false} /> <XAxis dataKey='month' tickLine={false} tickMargin={10} axisLine={false} tickFormatter={(value) => value.slice(0, 3)} /> <ChartTooltip content={<ChartTooltipContent />} /> <Bar dataKey='desktop' fill='var(--color-desktop)' radius={4} /> <Bar dataKey='mobile' fill='var(--color-mobile)' radius={4} /> </BarChart>
RTL
Right-to-left layout support for languages such as Arabic and Hebrew.
Translations are AI-generated for demonstration and may be imperfect.
Tooltip
A chart tooltip contains a label, name, indicator and value. Combine them to customize your tooltip.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@codefast/ui/chart";
import { Bar, BarChart, XAxis } from "recharts";
<ChartContainer config={config}>
<BarChart data={data}>
<XAxis dataKey="month" />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="visitors" fill="var(--color-visitors)" />
</BarChart>
</ChartContainer>
API reference
Props for each part of the component. All native element props are also forwarded.
ChartContainer
Wraps a Recharts chart and supplies CSS variables from config.
| Prop | Type | Default | Description |
|---|---|---|---|
| config | ChartConfig | — | Maps each series key to a label and colour (exposed as --color-<key>). |
| children | ReactNode | — | Any Recharts chart (BarChart, LineChart, AreaChart…). |
ChartTooltip / ChartTooltipContent
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Pass <ChartTooltipContent /> for themed, config-aware tooltips. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
- Set accessibilityLayer on the Recharts chart for keyboard and screen-reader support.
- Pair charts with a caption or table — don’t rely on visuals alone for key numbers.
- Use distinct colours and labels, not colour alone, to tell series apart.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Define every series in config so colours and labels stay consistent.
- Keep axes and tooltips uncluttered.
Don’t
- Don’t encode meaning with colour only.
- Don’t use a chart where a single number or table is clearer.