Area Chart

Filled area charts. Free, MIT · Charts and analytics › Trends

Line chart with gradient fills from each series color to transparent.

Installation

npx valyro-cli@latest add area-chart

npx shadcn@latest add https://valyro.xyz/r/area-chart.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { AreaChart } from 'valyro-ui';

Props

Prop	Type
`stacked`	`boolean`	Stack series on top of each other (the tooltip adds a total). Missing values leave a gap in their own series.
`data` *	`T[]`	Rows to plot, one per x position; a missing or non-numeric value breaks that series' line.
`x` *	`X`	Field used for the x axis (dates or categories), plotted in data order.
`series` *	`ChartSeries<T>[]`	Numeric fields drawn as lines (or areas), each with its legend label and optional color.
`height`	`number`	Plot height in px; width follows the container. Default 240.
`curve`	`'linear' \| 'monotone'`	Default: the theme's `--ui-chart-curve` (`linear` in Vercel, `monotone` in Glass).
`valueFormatter`	`ValueFormatter`	Formats values in the tooltip and data table. Axis ticks keep its units around a shorter number ("$15K").
`tickFormatter`	`ValueFormatter`	Formats the value-axis ticks instead of the shortened `valueFormatter`.
`xFormatter`	`(value: T[X], index: number) => string`	Formats x values for axis labels and the tooltip title.
`locale`	`string`	BCP 47 locale for the default number and date formatting. Default: the `ThemeProvider` locale, then the browser's.
`xLabel`	`string`	Header of the x column in the accessible data table. Default: the `x` key.
`labels`	`Partial<XYChartLabels>`	Overrides for the built-in strings.
`showGrid`	`boolean`	Horizontal grid lines at the value ticks; the zero line is drawn either way.
`showLegend`	`boolean`	Default: shown when there is more than one series.
`loading`	`boolean`	Shows a placeholder of the same height while data loads.
`ariaLabel` *	`string`	Accessible name of the chart (also the caption of its sr-only data table).

Related components

Line Chart — Line charts
Bar Chart — Bar charts
Scatter Chart — Scatter and bubble charts with a trend line
Sparkline — Tiny inline charts
Confidence Band Chart — Forecast with confidence intervals and outliers, keyboard-readable points
Candlestick Chart — Stock candlesticks with volume and moving averages
Donut Chart — Donut charts
Treemap — Hierarchies as areas, with drill-down
Funnel Chart — Conversion funnels
Sankey Chart — Flow diagrams between stages
Radar Chart — Radar charts for comparing profiles
Heatmap — Heatmaps

Previous: Bar Chart · Next: Scatter Chart · All Charts and analytics