Beautiful Charts
Get all-access
All charts

Free · Recharts · Editable React source

Area Foundation

A flexible Recharts area base with multiple series, gradients, stacking, and curve controls.

Switch to ECharts

This is the installable component, not a mockup. Width is a preview container setting; theme and colors use your app’s shadcn CSS variables.

Select a mark or an accessible data-table value, or change the range to inspect the callback.

Waiting for an interaction…
Edit sample data · JSON

01 / Installation

Your code. Your project.

Use an initialized shadcn/Tailwind React project. The URL installs the component and its shared files recursively. No namespace configuration, platform account, or agent files.

Next.js, Vite & manual setup →
npx shadcn@latest add https://beautifulcharts.dev/r/recharts-area-foundation.json

Package dependencies: recharts. Shared files are included in Source above. The installed license file covers the free source.

For a manual install, add those packages, copy every listed Source file to its displayed path, and adjust the @/ alias if your project uses a different one.

02 / Component API

Make it yours.

Types, defaults, and source below are generated from the distributed component. Numeric values must be finite; recipe-specific bounds are checked in source. Formatters change displayed labels, not the underlying measurements.

Area Foundation props
PropTypeDefaultRequired
dataAreaChartDatum[]sampleDataNo
xKeystring"period"No
seriesAreaSeries[]sampleSeriesNo
titlestring"Area foundation"No
subtitlestring"Compare change across a continuous sequence"No
curve"linear" | "monotone" | "step""monotone"No
fill"gradient" | "solid" | "none""gradient"No
showGridbooleantrueNo
showTooltipbooleantrueNo
showLegendbooleanfalseNo
showBrushbooleanfalseNo
onRangeChange(range: { startIndex?: number; endIndex?: number }) => void—No
onSelect(selection: { dataIndex: number; datum: AreaChartDatum }) => void—No
valueFormatter(value: unknown) => string—No
ariaDescriptionstring—No
childrenReactNode—No
isLoadingboolean—No
classNamestring—No
Exact data and series types
export type AreaChartDatum = Record<string, string | number | undefined>;

export type AreaSeries = { key: string; label?: string; color?: string; fillOpacity?: number; width?: number; stackId?: string };

export type AreaFoundationProps = {
  data?: AreaChartDatum[]; xKey?: string; series?: AreaSeries[]; title?: string; subtitle?: string;
  curve?: "linear" | "monotone" | "step"; fill?: "gradient" | "solid" | "none"; showGrid?: boolean; showTooltip?: boolean; showLegend?: boolean; showBrush?: boolean; onRangeChange?: (range: { startIndex?: number; endIndex?: number }) => void; onSelect?: (selection: { dataIndex: number; datum: AreaChartDatum }) => void; valueFormatter?: (value: unknown) => string; ariaDescription?: string; children?: ReactNode; isLoading?: boolean; className?: string;
};

shadcn theming

Your card, text, border, error, font, and chart colors—not a forced design system.

Native customization

Modify the local source or use the documented renderer-native extension points.

Accessible states

Loading, empty states, reduced motion, descriptions, and inspectable data tables.