AreaChartbeta

Area chart for trends with volume emphasis — filled regions, optionally stacked.

Playground

New
Returning

Area chart: 6 points, 2 series
Category	New	Returning
Jan	4	6
Feb	7	3
Mar	5	8
Apr	9	5
May	12	7
Jun	10	9

Stacked

Show legend

Show grid

Fill opacity

Height (px)

<script lang="ts">
  import { AreaChart } from '@urbicon-ui/blocks';

  const data = [
    { label: 'Jan', values: [4, 6] },
    { label: 'Feb', values: [7, 3] },
    { label: 'Mar', values: [5, 8] },
    { label: 'Apr', values: [9, 5] },
    { label: 'May', values: [12, 7] },
    { label: 'Jun', values: [10, 9] }
  ];
  const series = [{ label: 'New' }, { label: 'Returning' }];
</script>

<AreaChart
  {data}
  {series}
  fillOpacity={0.2}
  height={260}
/>

01 Examples

Single area

A filled region under one series, anchored to the zero baseline — good for cumulative volume at a glance.

Area chart: 6 points
Category	Series 1
W1	20
W2	32
W3	28
W4	44
W5	52
W6	48

<div class="w-full max-w-2xl">
  <AreaChart data={single} />
</div>

Stacked

stacked accumulates series into bands, so the top edge reads as the total while each band shows its contribution.

New
Returning

Area chart: 5 points, 2 series, stacked
Category	New	Returning
Jan	4	6
Feb	7	3
Mar	5	8
Apr	9	5
May	12	7

<div class="w-full max-w-2xl">
  <AreaChart stacked data={signups} series={channels} />
</div>

Overlaid

Without stacked, series overlay with a translucent fill so you can compare their shapes directly.

New
Returning

Area chart: 5 points, 2 series
Category	New	Returning
Jan	4	6
Feb	7	3
Mar	5	8
Apr	9	5
May	12	7

<div class="w-full max-w-2xl">
  <AreaChart data={signups} series={channels} />
</div>

02 Customization

Fill opacity + colors

Tune fillOpacity and set per-series colors to match a brand or emphasise one band.

New
Returning

Area chart: 5 points, 2 series
Category	New	Returning
Jan	4	6
Feb	7	3
Mar	5	8
Apr	9	5
May	12	7

<div class="w-full max-w-2xl">
  <AreaChart
    fillOpacity={0.35}
    data={signups}
    series={[
      { label: 'New', color: 'var(--color-primary)' },
      { label: 'Returning', color: 'var(--color-secondary)' }
    ]}
  />
</div>

03 Accessibility

SVG with role="img"

The SVG carries role="img" with a generated aria-label that also notes when the chart is stacked.

Data-table fallback

A visually hidden table mirrors every value per series so the filled regions are never the only way to read the data.

04 API Reference

17 props

17 props 1 required

Prop	Type	Default	Description
`data` required	`CartesianDatum[]`	—	Ordered categories with per-series values.
`ariaLabel`	`string`	—	Accessible label; a summary is generated when omitted.
`class`	`string`	—	Extra classes merged onto the wrapper.
`fillOpacity`	`number`	`0.2 (overlay) / 0.85 (stacked)`	Opacity of the area fill (0–1).
`formatValue`	`(value: number) => string`	—	Format values for axis labels, tooltips, and the data table.
`height`	`number`	`240`	Height property for the AreaChart component
`locale`	`string`	—	BCP-47 locale for the default number formatter.
`margin`	`ChartMargin`	—	Plot margins; merged over the defaults.
`preset`	`string`	—	Apply a named preset registered on `<BlocksProvider>`.
`series`	`ChartSeries[]`	—	Series metadata (labels + colors); defaults to one per value column.
`showGrid`	`boolean`	`true`	Render horizontal gridlines.
`showLegend`	`boolean`	`true`	Show the series legend (only renders with >1 series).
`slotClasses`	`ChartSlotClasses`	—	Per-slot class overrides.
`stacked`	`boolean`	`false`	Stack series cumulatively instead of overlaying them.
`unstyled`	`boolean`	—	Remove all default tv classes.
`width`	`number`	—	Fixed width in px; omit for responsive width.
`...HTMLAttributes<HTMLElement>` inherited	`HTMLAttributes`	—	HTML attributes (excluding: 'children')

05 Types

Local type definitions used by this component.

6 types

Only referenced

Name	Kind	Category	Used by	Description
AreaChartProps	interface	props	0	—
CartesianDatum	interface	helper	1	One category (x-axis tick) with one value per series — shared by the cartesian charts.
ChartMargin	interface	helper	1	Plot margins (px). Any omitted side falls back to the frame default.
ChartSeries	interface	helper	1	A data series shared across the cartesian charts.
ChartSlotClasses	type	helper	1	Per-slot class overrides for the charts family.
ChartSlot	type	helper	0	Union of chart slot names (kept in sync with `chartVariants`).

06 Installation

Import

import { AreaChart } from '@urbicon-ui/blocks';

llm.txt