Area (S2)

Pre-alpha component

Area is a pre-alpha component — it has no finalized Spectrum 2 design yet and is imported from the pre-alpha subpath.

The Area component displays area charts. Areas are most useful for showing how a metric changes over a continuous dimension, such as time, and stack by default when multiple series share the same dimension value.

import { Chart, Axis, Legend } from '@spectrum-charts/react-spectrum-charts-s2';
import { Area } from '@spectrum-charts/react-spectrum-charts-s2/pre-alpha';

<Chart data={data}>
  <Axis position="bottom" labelFormat="time" baseline />
  <Axis position="left" grid />
  <Area dimension="datetime" metric="value" color="series" />
  <Legend />
</Chart>

---

Tooltips and popovers

Area supports ChartInspect and ChartPopover like other S2 chart mark components. Unlike the base package, S2 does not have a ChartTooltip component — use ChartInspect instead.

<Area dimension="datetime" metric="value" color="series">
  <ChartInspect>
    {(datum) => (
      <div>
        <div>Series: {datum.series}</div>
        <div>Value: {datum.value}</div>
      </div>
    )}
  </ChartInspect>
</Area>

---

Floating areas

Pass metricStart and metricEnd instead of metric to draw a "floating" area between two data fields (for example, a min/max range) rather than a stacked area from zero. Both must be provided together — if only one is set, Area logs an error and falls back to metric.

<Area dimension="datetime" metricStart="minTemperature" metricEnd="maxTemperature" />

---

Area props (S2)

name	type	default	description
children	ChartInspect | ChartPopover	–	Optional child components for inspect panels and popovers.
color	string	'series'	Key in the data used as the color facet.
dimension	string	'datetime'	Key in the data that the metric is trended against (x-axis).
metric	string	'value'	Key in the data used as the metric (y-axis). Ignored if metricStart/metricEnd are provided.
metricEnd	string	–	Key in the data for the end of a floating area. Must be paired with metricStart.
metricStart	string	–	Key in the data for the start of a floating area. Must be paired with metricEnd.
name	string	–	Name of the area component. Useful when referencing the area marks programmatically.
opacity	number	0.8	The fill opacity of the area.
order	string	–	Key in the data used to set the stack order of the area (higher order stacks on top).
padding	number	–	Horizontal padding — a ratio from 0 to 1 for categorical (point) scales, or a pixel value for continuous (time, linear) scales.
scaleType	'time' | 'linear' | 'point'	'time'	The type of scale used for the dimension.