LineChart
Layout helpers for Recharts line and area charts.
Quick Preview
Revenue trend
Monthly revenue · Jan–Jun
Usage
<AreaChart config={config} data={data} size="xl">
<LineChartGrid />
<LineChartXAxis dataKey="month" />
<LineChartYAxis />
<ChartTooltip content={<ChartTooltipContent />} />
<AreaChartSeries dataKey="revenue" name="Revenue" />
</AreaChart>Swap the AreaChart/AreaChartSeries pair for LineChart/LineChartSeries to drop the 15% area wash. Series colours come from LINE_CHART_PALETTE (the categorical chart-1…3 tokens) via each series' color prop. xl and huge sizes scale the plot on the root only; child marks resolve to lg.
Deprecated: useLineChartLayout
The useLineChartLayout hook predates recharts 3 wrapping support and is deprecated. Compose the <LineChart>/<AreaChart> primitives shown above instead; the hook is kept only until the next major.
Examples
Default (area)
An area trend for a single series, with a hover tooltip and a recessive grid.
Revenue trend
Monthly revenue · Jan–Jun
Multiple series
Two lines with a legend — identity is carried by the legend, never colour alone.
Listings closed
By neighbourhood · Jan–Jun
Props
| Prop/API | Type | Default | Description |
|---|---|---|---|
LineChart / AreaChart | root | - | Plot root: wraps ChartContainer + the recharts chart and provides size. |
size | one of sm, md, lg, xl, huge | inherited | Plot scale; xl/huge apply to the root only. |
config | ChartConfig | {} | Series labels/icons for the shared tooltip and legend. |
LineChartSeries / AreaChartSeries | color + recharts Line/Area props | chart-1 | One data series; color drives stroke/fill/dots. |
LineChartGrid / LineChartXAxis / LineChartYAxis | recharts props | - | Recessive grid and size-scaled axes. |
className | string | - | Local layout or spacing overrides on the plot box. |
Accessibility
- Provide visible labels or accessible names for interactive controls.
- Preserve the component-provided focus, keyboard, disabled, and invalid-state behavior.
- Do not communicate state with color alone; include text, icons, or helper copy.