Pro

Area chart React component for Tailwind CSS v4

Q: How do I install Area chart?

Run npx wingo-ui@latest add area-chart. It also adds the Wingo UI items it builds on (Chart kit, Motion presets, UIProvider and useLocale) and the npm packages motion, d3-shape and d3-scale. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/area-chart.

v1.0.0Added in 1.0.0

Volumes over time as filled areas: overlapping gradients, stacked bands for parts of a total, or 100% stacked shares.

Move the mouse over the plot for a crosshair, a dot on every band and a readout of every visible series (stacked charts list the top band first and add a Total row; percent charts show the value and its share, "$48,920 · 38.1%"). On a phone, tap a month to pin the readout above your finger, drag sideways to scrub (vertical drags still scroll the page), tap the same month again or anywhere outside to clear it. With the keyboard, Tab to the plot, then Left / Right walk the points, Home / End jump to the ends, PageUp / PageDown move by ten, Enter fires onDatumClick, Escape clears; a live region reads each point. Legend entries are buttons: click or tap one to hide or show its series (the stack re-flows with a glide), hover or focus one to highlight it. Switching type between overlap, stacked and percent glides the areas to their new shape and cross-fades the y ticks. Areas rise from the baseline and the lines draw in the first time the chart scrolls into view; reduced motion shows the final chart at once.

Area chart is a Pro React component in the React chart and stat components category, written in TypeScript for React 19 and Tailwind CSS v4. It installs as source with npx wingo-ui@latest add area-chart, together with Chart kit, Motion presets, UIProvider and useLocale and the npm packages motion, d3-shape and d3-scale.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add area-chart

Area chart is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AreaChart from @/components/ui/area-chart.

import { AreaChart } from "@/components/ui/area-chart"

const data = [
  { month: "2026-07", direct: 41460, online: 28700, partners: 18070 },
  { month: "2026-08", direct: 38030, online: 27300, partners: 15600 },
  { month: "2026-09", direct: 48920, online: 36400, partners: 22130 },
]

export function RevenueByChannel() {
  return (
    <AreaChart
      data={data}
      xKey="month"
      series={[
        { key: "direct", label: "Direct sales" },
        { key: "online", label: "Online store" },
        { key: "partners", label: "Partners" },
      ]}
      type="stacked"
      valueFormat="currency"
      currency="USD"
      label="Revenue by channel, 2026"
    />
  )
}

Props

data*
ChartDatum[]
One row per x position: { month: "2026-09", direct: 48920, online: 36400 }. Data order is x order (the chart does not sort).
xKeydefault "date"
string
The row key for the x axis. ISO days ("2026-09-24") and months ("2026-09") print as local dates.
series
AreaChartSeries[]
Which keys to draw ({ key, label?, color?, name? }), in color and stack order: series 1 is the bottom band. Inferred from the numeric keys of the first rows when omitted.
colors
string[]
Per-position palette overrides: slots ("series-3"), tones ("neutral", "brand", "success") or any css color.
typedefault "overlap"
"overlap" | "stacked" | "percent"
overlap: every area from zero, the first series on top. stacked: bands add up (negative values stack below zero, diverging). percent: 100% stacked shares, y axis 0 to 100 %, the readout and table add each share with one decimal ("38,1 %"), negatives drawn as 0.
filldefault "gradient"
"gradient" | "solid" | "none"
gradient fades the series color from fillOpacity to transparent; solid is a flat fill at fillOpacity; none draws lines only (always on, whatever showLine says).
fillOpacitydefault 0.22
number
The top of the gradient or the solid fill. Stacked bands add 0.1 so they read as bands; overlapping fills of two or more series never exceed 0.22.
showLinedefault true
boolean
The line on each area's top edge. Stacked bands keep a thin surface gap between them without it.
curvedefault "monotone"
"monotone" | "linear" | "natural" | "step"
How points are joined. monotone never overshoots the data.
strokeWidthdefault 2
number
Width of the top lines in px.
connectNullsdefault false
boolean
Bridge null gaps instead of breaking the area (overlap only; stacked types treat nulls as 0).
heightdefault 240
number
Plot height in px, reserved before measuring so nothing jumps. The width always fills the parent.
valueFormatdefault "number"
ChartValueFormat = "number" | "compact" | "currency" | "percent"
How values print in the readout, the ticks and the table: "128,450", "128K", "$128,450", "12.4%" (percent takes whole numbers). Ticks go compact on their own from 10,000.
currencydefault "USD"
string
ISO 4217 code for valueFormat="currency", printed with its narrow symbol ("$", "€"). Anything that is not a three-letter code prints as plain numbers with the text as a suffix.
decimals
number
Fraction digits in the readout and the table (ticks stay short). Auto by magnitude.
formatValue
(value: number, context: { series: string; kind: "tooltip" | "tick" | "label" | "table" }) => string
Full control over value text, e.g. v => `${v} units`. Percent ticks and shares keep the kit format.
formatX
(value: unknown, context: "axis" | "tooltip" | "table") => string
x labels; default formatChartLabel ("Sep" on the axis, "September 2026" in the readout).
localedefault ""
string
Intl locale for numbers and dates; empty uses UIProvider's locale, then the page's.
yDomaindefault "["auto", "auto"]"
AreaChartDomain = [number | "auto", number | "auto"]
Fixed value bounds. Areas always include zero; percent charts are always 0 to 100.
showGriddefault true
boolean
Hairlines at the value ticks.
showXAxisdefault true
boolean
x labels under the plot, thinned from the newest backwards so they never collide.
showYAxisdefault true
boolean
Value tick labels.
yAxisSidedefault "start"
"start" | "end"
end puts the value ticks on the right (finance style).
showLegenddefault true
boolean
The legend; only rendered with two or more series (one series is named by the card title).
legendPositiondefault "top"
"top" | "bottom"
Legend above or below the plot. It wraps on narrow widths.
legendToggledefault true
boolean
Legend entries are buttons that hide and show their series (the last visible series cannot be hidden).
showTooltipdefault true
boolean
The floating readout. When off, the crosshair, keyboard and live region still work.
tooltipModedefault "auto"
"auto" | "float" | "fixed"
float rides beside the crosshair, fixed pins above the plot; auto is fixed on touch screens.
referenceLines
{ value: number; label?: string; color?: string }[]
Dashed targets or averages ("Media 261"). In percent charts the value is a share (0 to 100).
animateddefault true
boolean
Areas rise and lines draw the first time the chart scrolls into view; data, type and legend changes glide.
loadingdefault false
boolean
A skeleton in the plot's shape, same height.
emptyState
ReactNode
Shown when data is empty or every value is null. Default: an icon tile and labels.empty.
labeldefault ""
string
Accessible name of the figure and caption of its data table. Empty joins the series names.
descriptiondefault ""
string
A one-sentence takeaway for screen readers (aria-describedby).
surfacedefault ""
string
The color behind the chart, used for dot rings and the gaps between stacked bands. Empty = var(--surface).
hiddenSeries
string[]
Hidden series keys (controlled). Pair with onHiddenSeriesChange.
defaultHiddenSeriesdefault "[]"
string[]
Series hidden at first (uncontrolled).
onHiddenSeriesChange
(keys: string[]) => void
Called when a legend toggle hides or shows a series.
activeIndex
number | null
The inspected x index (controlled), so two charts can share one crosshair.
defaultActiveIndexdefault "null"
number | null
The inspected index at first (uncontrolled).
onActiveIndexChange
(index: number | null) => void
Called while hovering, scrubbing or walking with the keyboard.
onDatumClick
(event: { index: number; datum: ChartDatum; series?: string }) => void
A click on the plot (series = the band under the pointer) or Enter on the inspected point (series = the first visible one).
labels
Partial<AreaChartLabels>
English defaults: empty, loading, table, total, other, inspectHint, showSeries, hideSeries and shareColumn (the percent table's share column).
classNames
Partial<Record<"legend" | "plot" | "tooltip" | "table" | "area" | "line" | "dot" | "grid" | "xAxis" | "yAxis", string>>
Extra classes for the inner parts.
className
string
Extra classes for the figure root, merged last.

Parts

DEFAULT_AREA_CHART_LABELS
constant
The English strings the chart uses (empty and loading text, the data table, the keyboard hint, show and hide series, the share column of a percent chart). Spread it and override what you translate.
AreaChartLabels
type
The shape of labels: the chart kit's shared strings plus shareColumn(series) for the percent table.
AreaChartSeries
type
One drawn key: { key, label?, color?, name? }, in color and stack order.

Examples

Overlap of two

Collected vs. expenses as overlapping gradients.

100% stacked

Channel shares per month, y axis 0 to 100%.

Solid bands, no lines

Stock per warehouse, weekly, with a custom value format.

Neutral with an average

A single monochrome area and a dashed reference line.

Loading and empty

The skeleton and the empty state keep the plot's height.

Phone

Five stacked series at 360px with the pinned readout.

Dependencies

motion d3-shape d3-scale chart-kit motion ui-config use-locale

Files

components/ui/area-chart.tsx

FAQ

Is the React Area chart component free?

The preview, props and docs are free; copying the source needs a Pro plan. See plans.

How do I install Area chart?

Run npx wingo-ui@latest add area-chart. It also adds the Wingo UI items it builds on (Chart kit, Motion presets, UIProvider and useLocale) and the npm packages motion, d3-shape and d3-scale. With shadcn, add the @wingo-ui registry with your API key, then run npx shadcn@latest add @wingo-ui/area-chart.

How does Area chart behave on phones?

On a phone, tap a month to pin the readout above your finger, drag sideways to scrub (vertical drags still scroll the page), tap the same month again or anywhere outside to clear it.

Used in

Admin Dashboard Page

More React chart and stat components

Funnel chart Radar chart Trend badge Gauge GitHub Activity Animated Counter

All 16 React chart and stat components

Articles using this component

React Charts Tailwind: 4 Charts and a Kit for Any Theme
Component guidesOct 19, 202610 min read
Best React Component Library for Dashboard Apps in 2026
Comparisons and alternativesOct 16, 202613 min read

Direct sales, Online store, Partners, Public tenders, Other
	Direct sales	Online store	Partners	Public tenders	Other
January 2026	36,210	18,520	15,160	9,260	5,050
February 2026	38,560	21,110	16,520	10,100	5,510
March 2026	37,130	21,220	15,030	10,610	4,410
April 2026	42,070	25,650	17,440	11,290	6,150
May 2026	44,360	28,830	19,960	11,090	6,660
June 2026	39,480	25,660	16,780	10,860	5,920
July 2026	41,460	28,700	18,070	11,690	6,380
August 2026	38,030	27,300	15,600	10,730	5,840
September 2026	48,920	36,400	22,130	13,600	7,400

Pro

Area chart React component for Tailwind CSS v4

v1.0.0Added in 1.0.0

Volumes over time as filled areas: overlapping gradients, stacked bands for parts of a total, or 100% stacked shares.

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

npx wingo-ui@latest add area-chart

Area chart is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AreaChart from @/components/ui/area-chart.

import { AreaChart } from "@/components/ui/area-chart"

const data = [
  { month: "2026-07", direct: 41460, online: 28700, partners: 18070 },
  { month: "2026-08", direct: 38030, online: 27300, partners: 15600 },
  { month: "2026-09", direct: 48920, online: 36400, partners: 22130 },
]

export function RevenueByChannel() {
  return (
    <AreaChart
      data={data}
      xKey="month"
      series={[
        { key: "direct", label: "Direct sales" },
        { key: "online", label: "Online store" },
        { key: "partners", label: "Partners" },
      ]}
      type="stacked"
      valueFormat="currency"
      currency="USD"
      label="Revenue by channel, 2026"
    />
  )
}

Props

data*
ChartDatum[]
One row per x position: { month: "2026-09", direct: 48920, online: 36400 }. Data order is x order (the chart does not sort).
xKeydefault "date"
string
The row key for the x axis. ISO days ("2026-09-24") and months ("2026-09") print as local dates.
series
AreaChartSeries[]
Which keys to draw ({ key, label?, color?, name? }), in color and stack order: series 1 is the bottom band. Inferred from the numeric keys of the first rows when omitted.
colors
string[]
Per-position palette overrides: slots ("series-3"), tones ("neutral", "brand", "success") or any css color.
typedefault "overlap"
"overlap" | "stacked" | "percent"
overlap: every area from zero, the first series on top. stacked: bands add up (negative values stack below zero, diverging). percent: 100% stacked shares, y axis 0 to 100 %, the readout and table add each share with one decimal ("38,1 %"), negatives drawn as 0.
filldefault "gradient"
"gradient" | "solid" | "none"
gradient fades the series color from fillOpacity to transparent; solid is a flat fill at fillOpacity; none draws lines only (always on, whatever showLine says).
fillOpacitydefault 0.22
number
The top of the gradient or the solid fill. Stacked bands add 0.1 so they read as bands; overlapping fills of two or more series never exceed 0.22.
showLinedefault true
boolean
The line on each area's top edge. Stacked bands keep a thin surface gap between them without it.
curvedefault "monotone"
"monotone" | "linear" | "natural" | "step"
How points are joined. monotone never overshoots the data.
strokeWidthdefault 2
number
Width of the top lines in px.
connectNullsdefault false
boolean
Bridge null gaps instead of breaking the area (overlap only; stacked types treat nulls as 0).
heightdefault 240
number
Plot height in px, reserved before measuring so nothing jumps. The width always fills the parent.
valueFormatdefault "number"
ChartValueFormat = "number" | "compact" | "currency" | "percent"
How values print in the readout, the ticks and the table: "128,450", "128K", "$128,450", "12.4%" (percent takes whole numbers). Ticks go compact on their own from 10,000.
currencydefault "USD"
string
ISO 4217 code for valueFormat="currency", printed with its narrow symbol ("$", "€"). Anything that is not a three-letter code prints as plain numbers with the text as a suffix.
decimals
number
Fraction digits in the readout and the table (ticks stay short). Auto by magnitude.
formatValue
(value: number, context: { series: string; kind: "tooltip" | "tick" | "label" | "table" }) => string
Full control over value text, e.g. v => `${v} units`. Percent ticks and shares keep the kit format.
formatX
(value: unknown, context: "axis" | "tooltip" | "table") => string
x labels; default formatChartLabel ("Sep" on the axis, "September 2026" in the readout).
localedefault ""
string
Intl locale for numbers and dates; empty uses UIProvider's locale, then the page's.
yDomaindefault "["auto", "auto"]"
AreaChartDomain = [number | "auto", number | "auto"]
Fixed value bounds. Areas always include zero; percent charts are always 0 to 100.
showGriddefault true
boolean
Hairlines at the value ticks.
showXAxisdefault true
boolean
x labels under the plot, thinned from the newest backwards so they never collide.
showYAxisdefault true
boolean
Value tick labels.
yAxisSidedefault "start"
"start" | "end"
end puts the value ticks on the right (finance style).
showLegenddefault true
boolean
The legend; only rendered with two or more series (one series is named by the card title).
legendPositiondefault "top"
"top" | "bottom"
Legend above or below the plot. It wraps on narrow widths.
legendToggledefault true
boolean
Legend entries are buttons that hide and show their series (the last visible series cannot be hidden).
showTooltipdefault true
boolean
The floating readout. When off, the crosshair, keyboard and live region still work.
tooltipModedefault "auto"
"auto" | "float" | "fixed"
float rides beside the crosshair, fixed pins above the plot; auto is fixed on touch screens.
referenceLines
{ value: number; label?: string; color?: string }[]
Dashed targets or averages ("Media 261"). In percent charts the value is a share (0 to 100).
animateddefault true
boolean
Areas rise and lines draw the first time the chart scrolls into view; data, type and legend changes glide.
loadingdefault false
boolean
A skeleton in the plot's shape, same height.
emptyState
ReactNode
Shown when data is empty or every value is null. Default: an icon tile and labels.empty.
labeldefault ""
string
Accessible name of the figure and caption of its data table. Empty joins the series names.
descriptiondefault ""
string
A one-sentence takeaway for screen readers (aria-describedby).
surfacedefault ""
string
The color behind the chart, used for dot rings and the gaps between stacked bands. Empty = var(--surface).
hiddenSeries
string[]
Hidden series keys (controlled). Pair with onHiddenSeriesChange.
defaultHiddenSeriesdefault "[]"
string[]
Series hidden at first (uncontrolled).
onHiddenSeriesChange
(keys: string[]) => void
Called when a legend toggle hides or shows a series.
activeIndex
number | null
The inspected x index (controlled), so two charts can share one crosshair.
defaultActiveIndexdefault "null"
number | null
The inspected index at first (uncontrolled).
onActiveIndexChange
(index: number | null) => void
Called while hovering, scrubbing or walking with the keyboard.
onDatumClick
(event: { index: number; datum: ChartDatum; series?: string }) => void
A click on the plot (series = the band under the pointer) or Enter on the inspected point (series = the first visible one).
labels
Partial<AreaChartLabels>
English defaults: empty, loading, table, total, other, inspectHint, showSeries, hideSeries and shareColumn (the percent table's share column).
classNames
Partial<Record<"legend" | "plot" | "tooltip" | "table" | "area" | "line" | "dot" | "grid" | "xAxis" | "yAxis", string>>
Extra classes for the inner parts.
className
string
Extra classes for the figure root, merged last.

Parts

DEFAULT_AREA_CHART_LABELS
constant
The English strings the chart uses (empty and loading text, the data table, the keyboard hint, show and hide series, the share column of a percent chart). Spread it and override what you translate.
AreaChartLabels
type
The shape of labels: the chart kit's shared strings plus shareColumn(series) for the percent table.
AreaChartSeries
type
One drawn key: { key, label?, color?, name? }, in color and stack order.

Examples

Overlap of two

Collected vs. expenses as overlapping gradients.

100% stacked

Channel shares per month, y axis 0 to 100%.

Solid bands, no lines

Stock per warehouse, weekly, with a custom value format.

Neutral with an average

A single monochrome area and a dashed reference line.

Loading and empty

The skeleton and the empty state keep the plot's height.

Phone

Five stacked series at 360px with the pinned readout.

Dependencies

motion d3-shape d3-scale chart-kit motion ui-config use-locale

Files

components/ui/area-chart.tsx

FAQ

Is the React Area chart component free?

The preview, props and docs are free; copying the source needs a Pro plan. See plans.

How do I install Area chart?

How does Area chart behave on phones?

On a phone, tap a month to pin the readout above your finger, drag sideways to scrub (vertical drags still scroll the page), tap the same month again or anywhere outside to clear it.

Used in

Admin Dashboard Page

More React chart and stat components

Funnel chart Radar chart Trend badge Gauge GitHub Activity Animated Counter

All 16 React chart and stat components

Articles using this component

React Charts Tailwind: 4 Charts and a Kit for Any Theme
Component guidesOct 19, 202610 min read
Best React Component Library for Dashboard Apps in 2026
Comparisons and alternativesOct 16, 202613 min read

Area chart React component for Tailwind CSS v4

Add to a project

Usage

Props

Parts

DEFAULT_AREA_CHART_LABELS

AreaChartLabels

AreaChartSeries

Examples

Overlap of two

100% stacked

Solid bands, no lines

Neutral with an average

Loading and empty

Phone

Dependencies

Files

FAQ

Is the React Area chart component free?

How do I install Area chart?

How does Area chart behave on phones?

See also

Used in

More React chart and stat components

Articles using this component

Revenue by channel, 2026

Area chart React component for Tailwind CSS v4

Add to a project

Usage

Props

Parts

DEFAULT_AREA_CHART_LABELS

AreaChartLabels

AreaChartSeries

Examples

Overlap of two

100% stacked

Solid bands, no lines

Neutral with an average

Loading and empty

Phone

Dependencies

Files

FAQ

Is the React Area chart component free?

How do I install Area chart?

How does Area chart behave on phones?

See also

Used in

More React chart and stat components

Articles using this component

Revenue by channel, 2026