LineChart

A line chart component for intuitively visualizing trends and changes over time — supports four curve styles (linear, monotone, step, natural) and per-series hover highlighting.

Types

Colors

Curve

Recharts

Base

Playground

Preview

Multiplemonotone

Type

Series

Style

Options

<Chart config={chartConfig} className="min-h-[200px]">
  <LineChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <ChartXAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <ChartTooltip content={<ChartTooltipContent />} />
    <ChartLegend content={<ChartLegendContent />} />
    <ChartLine dataKey="desktop" stroke="var(--color-desktop)" />
    <ChartLine dataKey="mobile" stroke="var(--color-mobile)" />
  </LineChart>
</Chart>

JSX Composition

Chart.* from this library; import everything else from Recharts.

Grid<CartesianGrid />

Y-Axis<ChartYAxis />

Legend<ChartLegend /> (multiple series)

Labels<LabelList /> (single series)

Patterns

Common display patterns for LineChart — choose based on your use case.

Default

Basic single-series line chart

Multiple Lines

Multiple overlapping series for comparison

Step Line

Step-style line chart (type="step")

Dashed Line

Solid and dashed line combination (variant="dashed")

API

Component Structure

Chart— Recharts

.LineProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

.LinePropsLine (type · variant · dot)

.XAxisX-axis

.YAxisY-axis

.TooltipTooltip wrapper

.TooltipContentPropsTooltip content

.LegendLegend wrapper

.LegendContentLegend content

Props

Chart

config—

ChartConfig

Chart configuration object — labels and color definitions

children—

ReactElement

Recharts chart component

idundefined

string

Unique chart ID for CSS variable scoping

hoverFadefalse

boolean

Highlights the hovered series at full opacity and fades out all others

Name	Type	Default	Description
`config`	`ChartConfig`	`—`	Chart configuration object — labels and color definitions
`children`	`ReactElement`	`—`	Recharts chart component
`id`	`string`	`undefined`	Unique chart ID for CSS variable scoping
`hoverFade`	`boolean`	`false`	Highlights the hovered series at full opacity and fades out all others

ChartLine

type"monotone"

"linear" | "monotone" | "step" | "natural"

Curve interpolation type — monotone for smooth curves, linear for straight lines, step for staircase, natural for natural spline

variant"solid"

"solid" | "dashed"

Line style — dashed renders as a dashed line

dottrue

boolean

Show data point dots

activeDottrue

boolean

Show active dot on hover

Name	Type	Default	Description
`type`	`"linear" \| "monotone" \| "step" \| "natural"`	`"monotone"`	Curve interpolation type — monotone for smooth curves, linear for straight lines, step for staircase, natural for natural spline
`variant`	`"solid" \| "dashed"`	`"solid"`	Line style — dashed renders as a dashed line
`dot`	`boolean`	`true`	Show data point dots
`activeDot`	`boolean`	`true`	Show active dot on hover

ChartTooltipContent

indicator"dot"

"dot" | "line" | "dashed"

Indicator shape in the tooltip

hideLabelfalse

boolean

Hide the label

hideIndicatorfalse

boolean

Hide the indicator

colorundefined

string

Override indicator color — falls back to payload color when unset

labelClassNameundefined

string

Additional CSS class for the label element

nameKeyundefined

string

Data key name mapping

labelKeyundefined

string

Label key mapping

labelFormatterundefined

(value, payload) => ReactNode

Custom formatter for the label

formatterundefined

(value, name, item, index, payload) => ReactNode

Custom formatter for values

Name	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Indicator shape in the tooltip
`hideLabel`	`boolean`	`false`	Hide the label
`hideIndicator`	`boolean`	`false`	Hide the indicator
`color`	`string`	`undefined`	Override indicator color — falls back to payload color when unset
`labelClassName`	`string`	`undefined`	Additional CSS class for the label element
`nameKey`	`string`	`undefined`	Data key name mapping
`labelKey`	`string`	`undefined`	Label key mapping
`labelFormatter`	`(value, payload) => ReactNode`	`undefined`	Custom formatter for the label
`formatter`	`(value, name, item, index, payload) => ReactNode`	`undefined`	Custom formatter for values

ChartLegendContent

hideIconfalse

boolean

Hide the icon

nameKeyundefined

string

Data key name mapping

verticalAlign"bottom"

"top" | "middle" | "bottom"

Vertical position — auto-injected by Recharts Legend

align"center"

"left" | "center" | "right"

Horizontal alignment — auto-injected by Recharts Legend

layout"horizontal"

"horizontal" | "vertical"

Layout direction — auto-injected by Recharts Legend

Name	Type	Default	Description
`hideIcon`	`boolean`	`false`	Hide the icon
`nameKey`	`string`	`undefined`	Data key name mapping
`verticalAlign`	`"top" \| "middle" \| "bottom"`	`"bottom"`	Vertical position — auto-injected by Recharts Legend
`align`	`"left" \| "center" \| "right"`	`"center"`	Horizontal alignment — auto-injected by Recharts Legend
`layout`	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction — auto-injected by Recharts Legend

ChartXAxis / ChartYAxis

tick{ style: { fontSize, fill } }

object

Axis label style — applies design tokens (--font-size-2xs, --color-text-subtle) by default, override with a custom object

width (YAxis)"auto"

number | "auto"

Y-axis width — auto adjusts to data when set to "auto", or fixed with a number

...props—

XAxisProps | YAxisProps

All Recharts XAxis / YAxis props are passed through as-is

Name	Type	Default	Description
`tick`	`object`	`{ style: { fontSize, fill } }`	Axis label style — applies design tokens (--font-size-2xs, --color-text-subtle) by default, override with a custom object
`width (YAxis)`	`number \| "auto"`	`"auto"`	Y-axis width — auto adjusts to data when set to "auto", or fixed with a number
`...props`	`XAxisProps \| YAxisProps`	`—`	All Recharts XAxis / YAxis props are passed through as-is

Code Recipes

Anatomy

3002001000

JanFebMarAprMay

February

Desktop305

Desktop

Mobile

Root

Chart wrapper

Chart Area

Plot area

X-Axis

Horizontal axis

Y-Axis

Vertical axis

Line

Data line

Dot

Data point

Tooltip

Hover info

Grid

Grid lines

Legend

Series legend

Best Practices

✓

Do

✓Use for time-series data and trend visualization
✓Always enable accessibilityLayer
✓Use variant="dashed" for projected values
✓Use design token colors

Don't

✗Don't use for category comparison — use BarChart instead
✗Don't pack more than 5 series into a single chart
✗Don't use monotone interpolation for discrete data — use step instead
✗Don't force comparisons without a grid

Accessibility

Keyboard

TabFocus the chart area

Arrow KeysMove between data points

ARIA / WCAG

accessibilityLayer keyboard + screen reader support
Tooltip provides data values as text
Legend identifies series visually
Color tokens automatically support dark mode

LineChart

Playground

Patterns

Default

Multiple Lines

Step Line

Dashed Line

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

ChartLine

ChartTooltipContent

ChartLegendContent

ChartXAxis / ChartYAxis

Code Recipes

Anatomy

Best Practices

Do

Don't

Accessibility

Keyboard

ARIA / WCAG

LineChart

Playground

Patterns

Default

Multiple Lines

Step Line

Dashed Line

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

ChartLine

ChartTooltipContent

ChartLegendContent

ChartXAxis / ChartYAxis

Code Recipes

Anatomy

Best Practices

Do

Don't

Accessibility

Keyboard

ARIA / WCAG

Related

BarChart

AreaChart

PieChart

MetricCard