Playground

Preview

MultipleSolid

Type

Series

Style

Options

<Chart config={chartConfig} className="min-h-[200px]">
  <AreaChart accessibilityLayer data={chartData}>
    <CartesianGrid vertical={false} />
    <Chart.XAxis dataKey="month" tickLine={false} tickMargin={10} axisLine={false} />
    <Chart.Tooltip content={<Chart.TooltipContent />} />
    <Chart.Legend content={<Chart.LegendContent />} />
    <Chart.Area dataKey="desktop" fill="var(--color-desktop)" stroke="var(--color-desktop)" />
    <Chart.Area dataKey="mobile" fill="var(--color-mobile)" stroke="var(--color-mobile)" />
  </AreaChart>
</Chart>

JSX Composition

Chart.* from this library, and other components from Recharts.

Grid<CartesianGrid />

Y-Axis<Chart.YAxis />

Legend<Chart.Legend />

Labels<LabelList />

Patterns

Main display patterns for AreaChart — choose based on your use case.

Default

Basic area chart with a single series

Multiple Areas

Overlay multiple series for comparison

Stacked

Stack multiple series to visualize totals

Gradient

Deep visual expression with gradient fill

Tooltip Styles

Use the indicator prop on Chart.TooltipContent to change the tooltip indicator shape.

Dot (default)

Default dot indicator

January

Desktop186

Mobile80

indicator="dot"

Line

Vertical line indicator

January

Desktop186

Mobile80

indicator="line"

Dashed

Dashed line indicator

January

Desktop186

Mobile80

indicator="dashed"

API

Component Structure

Chart— Recharts

.AreaProps.XAxis.YAxis.Tooltip.TooltipContentProps.Legend.LegendContent

.AreaPropsArea (type · variant · dot · fillOpacity)

.XAxisX-axis

.YAxisY-axis

.TooltipTooltip wrapper

.TooltipContentPropsTooltip content

.LegendLegend wrapper

.LegendContentLegend content

Props

Chart

config—

ChartConfig

Chart configuration object (label and color definitions)

children—

ReactElement

Recharts chart component

idundefined

string

Unique chart ID — used for CSS variable scoping

hoverFadefalse

boolean

Enables highlight effect — hovered series shown at full color, others faded out

Name	Type	Default	Description
`config`	`ChartConfig`	`—`	Chart configuration object (label and color definitions)
`children`	`ReactElement`	`—`	Recharts chart component
`id`	`string`	`undefined`	Unique chart ID — used for CSS variable scoping
`hoverFade`	`boolean`	`false`	Enables highlight effect — hovered series shown at full color, others faded out

Chart.Area

type"monotone"

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

Curve interpolation method

variant"solid"

"solid" | "gradient"

Fill style — "gradient" auto-generates an SVG linearGradient

dottrue

boolean

Show dots at data points

activeDottrue

boolean

Show highlighted dot on hover

fillOpacity0.4

number

Area opacity (0–1) — ignored for gradient variant

Name	Type	Default	Description
`type`	`"linear" \| "monotone" \| "step" \| "natural"`	`"monotone"`	Curve interpolation method
`variant`	`"solid" \| "gradient"`	`"solid"`	Fill style — "gradient" auto-generates an SVG linearGradient
`dot`	`boolean`	`true`	Show dots at data points
`activeDot`	`boolean`	`true`	Show highlighted dot on hover
`fillOpacity`	`number`	`0.4`	Area opacity (0–1) — ignored for gradient variant

Chart.TooltipContent

indicator"dot"

"dot" | "line" | "dashed"

Indicator shape

hideLabelfalse

boolean

Hide the label

hideIndicatorfalse

boolean

Hide the indicator

colorundefined

string

Directly sets indicator color — falls back to payload color if not set

labelClassNameundefined

string

CSS class added to the label element

nameKeyundefined

string

Name mapping for data key

labelKeyundefined

string

Mapping for label key

labelFormatterundefined

(value, payload) => ReactNode

Custom label formatter

formatterundefined

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

Custom value formatter

Name	Type	Default	Description
`indicator`	`"dot" \| "line" \| "dashed"`	`"dot"`	Indicator shape
`hideLabel`	`boolean`	`false`	Hide the label
`hideIndicator`	`boolean`	`false`	Hide the indicator
`color`	`string`	`undefined`	Directly sets indicator color — falls back to payload color if not set
`labelClassName`	`string`	`undefined`	CSS class added to the label element
`nameKey`	`string`	`undefined`	Name mapping for data key
`labelKey`	`string`	`undefined`	Mapping for label key
`labelFormatter`	`(value, payload) => ReactNode`	`undefined`	Custom label formatter
`formatter`	`(value, name, item, index, payload) => ReactNode`	`undefined`	Custom value formatter

Chart.LegendContent

hideIconfalse

boolean

Hide the icon

nameKeyundefined

string

Name mapping for data key

verticalAlign"bottom"

"top" | "middle" | "bottom"

Vertical position — auto-injected from Recharts Legend

align"center"

"left" | "center" | "right"

Horizontal position — auto-injected from Recharts Legend

layout"horizontal"

"horizontal" | "vertical"

Layout direction — auto-injected from Recharts Legend

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

Chart.XAxis / Chart.YAxis

tick{ style: { fontSize, fill } }

object

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

width (YAxis)"auto"

number | "auto"

Y-axis width — "auto" adjusts to data. Pass a number for fixed width

...props—

XAxisProps | YAxisProps

All Recharts XAxis / YAxis props are accepted

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

Code Recipes

Anatomy

1

2

4

3002001000

8

5

6

3

JanFebMarAprMay

7

March

Desktop237

9

Desktop

Mobile

1

Root

Chart wrapper

2

Chart Area

Plot area

3

X-Axis

Horizontal axis

4

Y-Axis

Vertical axis

5

Area Fill

Fill area

6

Area Line

Area top line

7

Tooltip

Hover info

8

Grid

Grid lines

9

Legend

Series legend

Best Practices

✓

Do

✓Centralize labels and colors via ChartConfig
✓Always enable accessibilityLayer
✓Use the same stackId for stacked areas
✓Use gradient for visual depth

✕

Don't

✗Don't use hardcoded color values directly
✗Don't place a chart without a container size
✗Don't pack more than 5 series into one chart
✗Don't increase fill opacity too much in stacked charts — overlapping areas become invisible

Accessibility

Keyboard

TabFocus on chart area

Arrow KeysNavigate between data points

ARIA / WCAG

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

AreaChart

Playground

Patterns

Default

Multiple Areas

Stacked

Gradient

Tooltip Styles

Dot (default)

Line

Dashed

API

Component Structure

Props

Chart

Chart.Area

Chart.TooltipContent

Chart.LegendContent

Chart.XAxis / Chart.YAxis

Code Recipes

Anatomy

Best Practices

Do

Don't

Accessibility

Keyboard

ARIA / WCAG

Related

LineChart

BarChart

PieChart

MetricCard