ComponentsCharts

Area chart

Volume or trend over time — traffic, pipeline value, headcount. Stacked or 100% stacked, gradient / solid / no fill, a dashed previous-period series and reference lines.

Recharts AreaChart charts/area-chart.tsx, charts/chart-shell.tsx, charts/chart.tsxtheme · material · accent · density · font

Nov 1 – Nov 30. Visits: low 820 (Nov 1), high 1,419 (Nov 27), average 1,105.37. Previous 30 days: low 705 (Nov 1), high 1,222 (Nov 28), average 951.47.

Site traffic, November
DateVisitsPrevious 30 days
Nov 1, 2026820705
Nov 2, 2026926794
Nov 3, 20261,027878
Nov 4, 20261,028873
Nov 5, 20261,105936
Nov 6, 20261,075985
Nov 7, 20261,118939
Nov 8, 20261,144959
Nov 9, 20261,066966
Nov 10, 20261,067885
Nov 11, 2026973878
Nov 12, 2026969871
Nov 13, 2026969789
Nov 14, 2026890795
Nov 15, 2026914734
Nov 16, 2026865766
Nov 17, 2026923813
Nov 18, 2026998795
Nov 19, 2026998869
Nov 20, 20261,098953
Nov 21, 20261,114961
Nov 22, 20261,2211,050
Nov 23, 20261,2321,134
Nov 24, 20261,3241,131
Nov 25, 20261,4031,195
Nov 26, 20261,3751,166
Nov 27, 20261,4191,201
Nov 28, 20261,3571,222
Nov 29, 20261,3701,151
Nov 30, 20261,3731,150

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { AreaChart } from "@vamos-ui/react/charts";

<AreaChart title="Traffic" data={rows} x="date" config={{ visits: { label: "Visits" } }} height="md" />

null values leave gaps (connectNulls is off); a single point renders as a dot.

Gradient ids come from useId, so two charts on a page never collide.

Examples

Stacked by channel

stack="stacked" with fill="solid"; the tooltip reads the total.

Sep 7 – Oct 19. Organic: low 4,210 (Sep 7), high 5,490 (Oct 19), average 4,794.29. Paid: low 1,860 (Sep 7), high 2,450 (Oct 19), average 2,138.57. Social: low 870 (Sep 14), high 1,260 (Oct 12), average 1,081.43. Email: low 640 (Sep 7), high 940 (Oct 19), average 777.14.

Sessions by channel
WeekOrganicPaidSocialEmail
Sep 74,2101,860920640
Sep 144,4802,010870710
Sep 214,3902,2401,040690
Sep 284,7202,1201,180820
Oct 55,0101,9801,090760
Oct 125,2602,3101,260880
Oct 195,4902,4501,210940

100% stacked

stack="percent": the axis reads 0–100%, the tooltip adds each share.

May – Oct. Mobile: low 5,840 (May), high 7,420 (Oct), average 6,735. Desktop: low 3,720 (Jul), high 4,260 (Sep), average 4,013.33. Tablet: low 520 (Aug), high 610 (May), average 556.67.

Device mix
MonthMobileDesktopTablet
May5,8404,120610
Jun6,2103,980580
Jul6,9403,720540
Aug7,1803,810520
Sep6,8204,260560
Oct7,4204,190530

Compare to previous period (HR)

compare={{ key }} draws that series dashed, unfilled and outside the stack.

Jan – Oct. 2026: low 212 (Jan), high 259 (Oct), average 235. 2025: low 184 (Jan), high 210 (Oct), average 199.

Headcount, 2026 vs 2025
Month20262025
Jan212184
Feb216186
Mar223191
Apr229193
May231198
Jun238202
Jul244205
Aug246207
Sep252209
Oct259210

Target line

reference lines take a token colour and a label; the axis extends to include them.

Apr – Oct. MRR: low $38,200.00 (Apr), high $54,600.00 (Oct), average $45,957.14.

Monthly recurring revenue
MonthMRR
Apr$38,200.00
May$41,900.00
Jun$44,300.00
Jul$43,700.00
Aug$47,800.00
Sep$51,200.00
Oct$54,600.00

API

AreaChart

PropTypeDefault
…Chart props
title, data, config, x, formats, height, state, legend, tableToggle, onPointClick… (see Chart frame).
ChartProps—
series
Keys to draw. Default: every config key.
string[]—
stack
Stacking.
"none" | "stacked" | "percent""none"
curve
Line interpolation.
"monotone" | "linear" | "step""monotone"
fill
Fill under the line. Gradient top opacity drops in glass mode.
"gradient" | "solid" | "none""gradient"
compare
Previous-period series: dashed, no fill, not stacked.
{ key: string }—
reference
Horizontal reference lines.
{ y, label?, color? }[]—
hideYAxis
Hide the value axis (compact cards).
booleanfalse
Previous
Approval flow
Next
Article layout