Bar Chart
A grouped bar chart with tooltip and legend.
Line Chart
A line chart using the same config and data.
Tooltip Indicators
The tooltip supports dot, line, and dashed indicator styles.
Props
| Prop | Type | Description |
|---|---|---|
| config | ChartConfig | Object mapping data keys to labels, icons, and colors/themes |
| children | ReactNode | Recharts chart component (BarChart, LineChart, etc.) |
| className | string | Additional classes on the container |
Usage
import { Chart, type IChartConfig } from "@/components/ui";
import { Bar, BarChart, XAxis, YAxis } from "recharts";
const config: IChartConfig = {
desktop: { label: "Desktop", color: "var(--color-primary)" },
};
<Chart.Container config={config}>
<BarChart data={data}>
<XAxis dataKey="month" />
<YAxis />
<Chart.Tooltip content={<Chart.TooltipContent />} />
<Chart.Legend content={<Chart.LegendContent />} />
<Bar dataKey="desktop" fill="var(--color-desktop)" />
</BarChart>
</Chart.Container>