AreaChartbeta

Area chart for trends, with the area under each series filled.

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

Each datum has a label and a values array, and values[i] belongs to series[i]. Pass series to name and colour the bands and to drive the legend; a single value per datum needs no series. Add stacked to sum the bands into a running total.

Single area

One series, filled down to the zero baseline.

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 sums the series so the top edge is the running total.

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>

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>

Band and edge apart

A series is two paths: slotClasses.area reaches the filled band, slotClasses.areaOutline its top edge. mark reaches both, so a paint written there lands on both.

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}
    slotClasses={{ area: 'opacity-60', areaOutline: 'stroke-text-primary stroke-[2px]' }}
  />
</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 screen-reader users read the exact values.

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`	SVG height in px.
`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`	`AreaChartSlotClasses`	—	Per-slot class overrides. A series is drawn as two paths and `mark` lands on both of them, so a utility that sets a paint there reaches both: `fill-` fills the top edge's open polyline, `stroke-` outlines the band. Use `area` for the filled band alone and `areaOutline` for its top edge alone; each is folded against `mark` rather than appended to it, so an entry there wins its Tailwind bucket outright instead of by stylesheet order.
`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	—
AreaChartSlotClasses	type	helper	1	Per-slot class overrides for `<AreaChart>`.
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.
AreaChartSlot	type	helper	0	Slots `<AreaChart>` paints.

06 Installation

Import

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

llm.txt