[ [UI.106] Charts ] Line Chart

Line Chart

> A multi-series line chart built with Recharts. Supports multiple data series, tooltips, legends, and customizable styling.

Import

[ [0x5B] IMPORT ]

1import { LineChart, LineChartCard } from "@/components/ui/line-chart"

Preview

[ [0x00] LINE CHART ]

1<LineChart
2  data={data}
3  xAxisKey="month"
4  series={[
5    { dataKey: "revenue", name: "Revenue", color: "var(--color-primary)" },
6    { dataKey: "users", name: "Users", color: "var(--color-accent)" },
7  ]}
8  height={300}
9  showLegend={true}
10/>

Variants

[ [0x00] WITH CARD WRAPPER ]

[0x01] REVENUE ANALYTICS

Monthly revenue trend

1<LineChartCard
2  title="Revenue Analytics"
3  description="Monthly revenue trend"
4  code="0x01"
5  icon={<TrendingUp className="h-4 w-4 text-primary" />}
6  data={data}
7  xAxisKey="month"
8  series={[{ dataKey: "revenue", name: "Revenue" }]}
9/>

[ [0x00] SINGLE SERIES ]

1<LineChart
2  data={data}
3  xAxisKey="month"
4  series={[{ dataKey: "revenue", name: "Revenue", showDots: true }]}
5  height={200}
6/>

[ [0x00] DASHED LINE ]

1<LineChart
2  data={data}
3  xAxisKey="month"
4  series={[
5    { dataKey: "revenue", name: "Revenue" },
6    { dataKey: "users", name: "Users (Projected)", dashed: true },
7  ]}
8/>

API Reference

[ [0x00] API REFERENCE ]

Prop	Type	Default	Description
data*	`LineChartDataPoint[]`	-	Chart data array.
xAxisKey*	`string`	-	Data key for X-axis.
series*	`LineChartSeries[]`	-	Line series configuration.
height	`number`	`300`	Chart height in pixels.
showGrid	`boolean`	`true`	Show grid lines.
showLegend	`boolean`	`false`	Show legend.
showTooltip	`boolean`	`true`	Show tooltip on hover.
yAxisFormatter	`(value: number) => string`	-	Y-axis value formatter.
xAxisFormatter	`(value: string) => string`	-	X-axis value formatter.

Accessibility

[ [0x58] A11Y ]

Keyboard accessible tooltips
Color-blind friendly with distinguishable patterns
Accessible legend with proper labels

1<LineChart

2 data={data}

3 xAxisKey="month"

4 series={[

5 { dataKey: "revenue", name: "Revenue", color: "var(--color-primary)" },

6 { dataKey: "users", name: "Users", color: "var(--color-accent)" },

7 ]}

8 height={300}

9 showLegend={true}

10/>