AreaChart

A line chart with the area below the line filled. Use it for volumes over time, and stack the series to show how parts add up to a total.

import { AreaChart } from 'jarvis-react-ui';

Basic

import { AreaChart } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <AreaChart
            className="w-full"
            aria-label="Memory usage"
            labels={['00', '04', '08', '12', '16', '20']}
            curve="smooth"
            series={[{ id: 'mem', label: 'Memory', data: [3.1, 2.8, 5.6, 7.9, 7.2, 4.4] }]}
            formatValue={(v) => `${v} GB`}
        />
    );
}

Stacked

stacked places each series on top of the previous one, so the upper edge shows the total. The tooltip and table still list the individual values.

import { AreaChart } from 'jarvis-react-ui';

export default function Stacked() {
    return (
        <AreaChart
            className="w-full"
            aria-label="Power output by source"
            labels={['00', '04', '08', '12', '16', '20']}
            stacked
            series={[
                { id: 'arc', label: 'Arc reactor', data: [60, 62, 58, 64, 66, 61] },
                { id: 'solar', label: 'Solar', data: [0, 4, 28, 40, 22, 2], color: 'success' },
                { id: 'grid', label: 'Grid', data: [12, 10, 6, 4, 8, 14], color: 'muted' },
            ]}
            formatValue={(v) => `${v} kW`}
        />
    );
}

Data, colors and axis

AreaChart takes the same series, labels, colors and axis props as LineChart. The y-axis always includes zero, so areas start from the baseline.

Accessibility

Same as LineChart: aria-label, a screen-reader table, and a keyboard inspection control (Tab, then arrow keys).

API

Prop	Type	Default	Description
`aria-label` (required)	`string`		Accessible name of the chart; also the caption of the screen-reader data table.
`series` (required)	`ChartSeries[]`		Data series to draw.
`className`	`string`		Additional class names for the root element.
`curve`	`'linear' \| 'smooth'`	`'linear'`	`smooth` draws curved edges.
`formatValue`	`((value: number) => string)`		Formats values on the y-axis and in the tooltip.
`height`	`number`	`200`	Height of the plot in pixels (axes and legend add to it).
`labels`	`string[]`		X-axis labels, one per data point. Defaults to `1, 2, 3, …`.
`showGrid`	`boolean`	`true`	Draws horizontal grid lines at the y ticks.
`showLegend`	`boolean`		Shows the legend; defaults to `true` for more than one series.
`showTooltip`	`boolean`	`true`	Shows the hover/keyboard tooltip with the values at a position.
`stacked`	`boolean`	`false`	Stacks the series on top of each other instead of overlapping them.
`yMax`	`number`		Upper bound of the y-axis; computed from the data when omitted.
`yMin`	`number`		Lower bound of the y-axis; computed from the data when omitted.
`yTicks`	`number`	`4`	Approximate number of y-axis ticks.

Type `ChartSeries`

One data series of a LineChart, AreaChart or BarChart.

Field	Type	Description
`data` (required)	`number[]`	One value per x position (same length as `labels`).
`id` (required)	`string`	Unique id of the series.
`label` (required)	`string`	Name shown in the legend, tooltip and screen-reader table.
`color`	`ChartColor`	Token color; defaults to a color by series position.

Type `ChartColor`

Token color of a chart series.

type ChartColor = 'accent' | 'bright' | 'success' | 'warning' | 'error' | 'muted';