Area Chart

Change over time with a 10% area wash under 2px lines. Stack only when the total is meaningful.

Import

import { AreaChart } from '@marbleui/ui'

Props

<AreaChart>

Prop	Type	Default	Description
data *required	`Datum[]`	`—`
index *required	`string`	`—`	Key in each datum used for the x axis.
series *required	`Series[]`	`—`
summary *required	`string`	`—`	Accessible one-sentence summary of the chart.
className	`string`	`—`
curve	`'smooth' \| 'linear'`	`—`
description	`ReactNode`	`—`
endLabels	`boolean`	`—`	Label the last point of each line (direct labels, ≤4 series).
height	`number`	`—`
indexFormat	`(v: unknown) => string`	`—`
showGrid	`boolean`	`—`
showLegend	`boolean`	`—`
showYAxis	`boolean`	`—`
stacked	`boolean`	`—`
title	`ReactNode`	`—`
valueFormat	`(n: number) => string`	`—`

Usage notes

Change over time where the filled area helps show volume: 2px lines over a 10% wash. For trends without the fill use LineChart. The frame, summary and “Show data” table work as in ChartContainer.

<AreaChart
  title="Visits by channel"
  summary="Total visits rose through the year, mostly from organic search."
  data={visits} index="month"
  series={[{ key: 'organic', label: 'Organic' }, { key: 'paid', label: 'Paid' }, { key: 'referral', label: 'Referral' }]}
  stacked
/>

stacked piles the series so the top edge is the total; use it only when the total means something. Unstacked areas overlap and stay readable for two or three series.
Tab focuses the plot and shows the tooltip for the last point; Left/Right step through points, Home/End jump to the ends, Escape hides it, and a live region reads each point.
The y-axis always includes zero, and missing or non-numeric values are drawn as 0 rather than as gaps.
valueFormat formats the y-axis, tooltip and table; indexFormat the x labels. Width fills the container; height defaults to 240.

Example source · show

import { traffic } from '../lib/chart-samples'
import { AreaChart } from './area-chart'

const series = [
  { key: 'organic', label: 'Organic' },
  { key: 'paid', label: 'Paid' },
  { key: 'referral', label: 'Referral' },
]

export const styles = {
  Single: () => <AreaChart className="w-[36rem]" title="Organic visits" summary="Organic visits grew from about 4K in January to about 8K in December." data={traffic} index="month" series={series.slice(0, 1)} />,
  Stacked: () => <AreaChart className="w-[36rem]" title="Visits by channel" description="Stacked: total visits per month" summary="Total visits by channel, stacked, rising through the year." data={traffic} index="month" series={series} stacked />,
  Overlapping: () => <AreaChart className="w-[36rem]" title="Visits by channel" summary="Organic, paid and referral visits per month." data={traffic} index="month" series={series} />,
}

Source: packages/ui/src/area-chart/area-chart.tsx

Catalog