Chart

Line, bar, and area charts for dashboards, built on recharts. Colors are driven by the current design tokens by default — including the accent color picker in the header — so a chart repaints along with every other component when the theme changes.

<LineChart
data={[
  { month: "Jan", revenue: 4200, users: 240 },
  { month: "Feb", revenue: 3800, users: 139 },
  { month: "Mar", revenue: 5200, users: 380 },
  { month: "Apr", revenue: 4900, users: 420 },
  { month: "May", revenue: 6100, users: 510 },
]}
xKey="month"
series={[{ key: "revenue", label: "Revenue" }, { key: "users", label: "New users" }]}
/>

Editable — change the code above and the preview updates live.

Bar and area variants

<BarChart
data={[
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 3800 },
  { month: "Mar", revenue: 5200 },
]}
xKey="month"
series={[{ key: "revenue" }]}
/>

Editable — change the code above and the preview updates live.

<AreaChart
data={[
  { month: "Jan", revenue: 4200 },
  { month: "Feb", revenue: 3800 },
  { month: "Mar", revenue: 5200 },
]}
xKey="month"
series={[{ key: "revenue" }]}
/>

Editable — change the code above and the preview updates live.

Installation

import { LineChart, BarChart, AreaChart } from "@labanaat/ui/chart";

Props

All three share the same props:

Prop	Type	Default	Description
data	Record<string, string \| number>[]	—	Row data
xKey	string	—	Key used for the x-axis / category labels
series	{ key, label?, color? }[]	—	One entry per line/bar/area; color defaults to the token palette, cycling if needed
height	number	320	Chart height in pixels
showGrid	boolean	true	Shows the background grid lines
showLegend	boolean	series.length > 1	Shows the legend