Components
Chart
Themed chart primitives built on Recharts — ChartContainer handles responsive sizing, CSS variable colour injection, and consistent axis/grid/tooltip styling.
Install
npx shadcn@latest add https://atomx.acau.net/r/chart.jsonUsage
ChartContainer wraps a Recharts ResponsiveContainer and injects a ChartConfig as CSS variables (--color-<key>). Use the config to keep colours consistent between the chart series and the tooltip. ChartTooltip with ChartTooltipContent gives you a styled tooltip that reads labels and colours from the config automatically.
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
import {
type ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart"
const data = [
{ month: "Jan", value: 186 },
{ month: "Feb", value: 305 },
]
const config = {
value: { label: "Value", color: "hsl(var(--chart-1))" },
} satisfies ChartConfig
export function Example() {
return (
<ChartContainer config={config} className="h-48 w-full">
<BarChart data={data}>
<CartesianGrid vertical={false} />
<XAxis dataKey="month" tickLine={false} axisLine={false} />
<ChartTooltip content={<ChartTooltipContent />} />
<Bar dataKey="value" fill="var(--color-value)" radius={4} />
</BarChart>
</ChartContainer>
)
}Preview
Props
ChartContainer extends React.ComponentProps<"div">.
| Prop | Type | Notes |
|---|---|---|
config | ChartConfig | Required. Maps series keys to labels and colours. |
children | ReactNode | A Recharts chart component (BarChart, LineChart, etc.). |
className | string | Applied to the wrapper div. Use to set height. |
ChartTooltipContent props:
| Prop | Type | Notes |
|---|---|---|
hideLabel | boolean | Suppress the tooltip label row. |
hideIndicator | boolean | Suppress the colour dot/line. |
indicator | "dot" | "line" | "dashed" | Indicator shape. Defaults to "dot". |
nameKey | string | Override the series label key. |
labelKey | string | Override the tooltip label key. |