Sorting in area charts is usually based on the x-axis, such as time or categories. Sorting helps ensure that the areas are plotted in a logical progression.

Recharts

Engagement last 7d

Tracks likes, comments, and shares during the most recent 7-day period.

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/area-chart

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

chart

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install recharts react-aria-components

Examples

Monotone

Monotone charts use a smooth curve for a cleaner look. Good when you only need to show one metric clearly without visual clutter.

Traffic last 14d

Daily visits versus sign-ups trend.

Custom format

Customize the look of your chart to match your design system. You can change colors, styles, and anything else that matters for your UI.

Net revenue by month

Revenue minus expenses to show monthly profitability.

Add context when users hover. Custom tooltips let you show extra info like icons, units, or anything else that makes your data easier to read.

Engagement last 7d

Likes, comments, and shares for the recent week.

Custom legend

Replace the default legend with something more useful. Add icons, labels, or even interactions to better explain what’s on the chart.

Engagement last 7d

Likes, comments, and shares for the recent week.

Custom colors

Customize the colors of your area chart to match your brand or design system. This helps maintain visual consistency across your application.

Engagement last 7d

Tracks likes, comments, and shares during the most recent 7-day period.

Controlled

Manage the chart fully with state. Use this to sync with other UI, switch datasets, or respond to user interactions programmatically.

Engagement

Likes, comments, and shares over a dynamic time range.

Component API

The AreaChart component renders continuous data trends with filled areas.

Prop	Type	Default
`areaProps`	`Partial<ComponentProps<typeof Area>>`	-
`cartesianGridProps`	`CartesianGridProps`	-
`chartProps`	`Omit<ComponentProps<typeof AreaChartPrimitive>, "data" \| "stackOffset">`	-
`children`	`React.ReactNode`	-
`className`	`string`	-
`colors`	`readonly (ChartColorKeys \| string)[]`	`DEFAULT_COLORS`
`config`	`ChartConfig`	-
`connectNulls`	`boolean`	`false`
`containerHeight`	`number`	`370 desktop / 200 mobile`
`data`	`Record<string, any>[]`	`[]`
`dataKey`	`string`	-
`displayEdgeLabelsOnly`	`boolean`	`false`
`fillType`	`"gradient" \| "solid" \| "none"`	`gradient`
`hideGridLines`	`boolean`	`false`
`hideXAxis`	`boolean`	`false`
`hideYAxis`	`boolean`	`false`
`intervalType`	`IntervalType`	`equidistantPreserveStart`
`layout`	`ChartLayout`	`horizontal`
`legend`	`LegendContentType \| boolean`	`true`
`legendProps`	`Omit<ComponentProps<typeof LegendPrimitive>, "content" \| "ref">`	-
`tooltip`	`TooltipContentType<ValueType, NameType> \| boolean`	`true`
`tooltipProps`	`BaseChartProps["tooltipProps"]`	-
`type`	`ChartType`	`default`
`valueFormatter`	`(value: number) => string`	`(value) => value.toString()`
`xAxisProps`	`XAxisPropsPrimitive`	-
`yAxisProps`	`YAxisPrimitiveProps`	-