> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Area
export const GraphEmbed = ({src, story, aspectRatio, borderRadius = '14px', args}) => {
const STORYBOOK_BASE_URL = typeof window !== 'undefined' && window.location.hostname === 'localhost' ? 'http://localhost:6006' : 'https://storybook-sdk.vercel.app';
function buildArgsString(args) {
if (!args) return '';
const encodeValue = value => {
if (value === null) return '!null';
if (value === undefined) return '!undefined';
if (typeof value === 'boolean') return `!${value}`;
if (typeof value === 'number') return String(value);
return encodeURIComponent(String(value));
};
const properties = Object.entries(args).map(([key, value]) => `${key}:${encodeValue(value)}`).join(';');
return `&args=${properties}`;
}
const resolvedSrc = story ? `${STORYBOOK_BASE_URL}/iframe.html?id=${story}&viewMode=story&embed=1&globals=mode:readonly${buildArgsString(args)}` : src;
const resolvedAspectRatio = aspectRatio ?? (story ? '16 / 9' : '10 / 6');
return ;
};
An area chart is a line with the region beneath it filled. Use `geom.area()` to emphasise magnitude across an ordered or continuous x-axis, and its stacked form for part-to-whole trends.
## Basic example
```tsx theme={null}
import { useMemo } from 'react';
import {
GraphProvider,
GraphRenderer,
createSpec,
pipe,
geom,
scale,
} from '@graphysdk/react';
const data = {
columns: [
{ key: 'month', label: 'Month' },
{ key: 'revenue', label: 'Revenue' },
],
rows: [
{ month: '1 Jan', revenue: 1200 },
{ month: '2 Jan', revenue: 1800 },
{ month: '3 Jan', revenue: 2400 },
{ month: '4 Jan', revenue: 1600 },
{ month: '5 Jan', revenue: 3200 },
{ month: '6 Jan', revenue: 2800 },
],
};
export function RevenueChart() {
const spec = useMemo(
() =>
pipe(
createSpec({ x: 'month', y: 'revenue' }),
geom.area(),
scale.x(),
scale.y()
),
[]
);
return (
);
}
```
## Stacked area
Map a category to `color` and stack the layers for a part-to-whole trend. In long format, one row per `month` × `region`:
```tsx theme={null}
const data = {
columns: [
{ key: 'month', label: 'Month' },
{ key: 'region', label: 'Region' },
{ key: 'revenue', label: 'Revenue' },
],
rows: [
{ month: 'Jan', region: 'North', revenue: 300 },
{ month: 'Jan', region: 'South', revenue: 200 },
{ month: 'Feb', region: 'North', revenue: 400 },
{ month: 'Feb', region: 'South', revenue: 350 },
// ...
],
};
const spec = pipe(
createSpec({ x: 'month', y: 'revenue', color: 'region' }),
geom.area({ position: 'stack' }),
scale.x(),
scale.y(),
scale.color.palette()
);
```
`'stack'` is the area geom's default position, so the `position` above is explicit for clarity rather than required. Use `position: 'fill'` for a 100% stacked area, where each band shows its share of the total, or `position: 'identity'` to let the bands overlap at their raw values — the shape a [filled radar](/sdk-next/graph-types/radial) needs.
## Points on the area
Add a `geom.point()` layer to mark every vertex. It shares the spec-level mapping, so both layers plot the same series. Pipe it after the area so the dots sit on top, and set `interactive: false` on the point layer:
```tsx theme={null}
import { createSpec, pipe, geom, scale, styles, style } from '@graphysdk/react';
const spec = pipe(
createSpec({ x: 'month', y: 'revenue' }),
geom.area(),
geom.point({ id: 'vertices', interactive: false }),
scale.x(),
scale.y(),
styles({ defaults: [style.geom.point({ size: 6 }, { layer: 'vertices' })] })
);
```
`interactive: false` keeps the points out of hit-detection so the area owns hover — it resolves the nearest point along the x-axis and drives the tooltip. Interactive points would make hover fire only when the cursor lands directly on a dot.
Marker diameter is paint, so it comes from the [stylesheet](/sdk-next/config/styling) — `style.geom.point({ size })`, default `8`. Giving the layer an `id` and scoping the entry with `{ layer }` keeps the size on the dots and off anything else the chart draws.
Over a **stacked** area, give the point layer `position: 'stack'` too. A point layer defaults to `'identity'`, so without it the dots plot at raw values and float off the stacked surface:
```tsx theme={null}
const spec = pipe(
createSpec({ x: 'month', y: 'revenue', color: 'region' }),
geom.area({ position: 'stack' }),
geom.point({ position: 'stack', interactive: false }),
scale.x(),
scale.y(),
scale.color.palette()
);
```
## Area params
`geom.area()` takes the same curve family as the line, and its own answer for nulls:
Curve family. `'smooth'` smooths the outline through every point.
How the band handles `null` values: treat them as zero (`'zero'`), or drop the
null rows so the band spans the gap (`'connect'`). `'gap'` is accepted and
normalised to `'zero'` — an area can't render a gap mid-stack.
## Painting the band
Fill opacity, and the outline's width, dash and opacity, come from the [stylesheet](/sdk-next/config/styling), through the `style.geom.area` target:
```tsx theme={null}
styles({ defaults: [style.geom.area({ fillAlpha: 1, strokeWidth: 3 })] });
```
The built-in fill is `fillAlpha: 0.3`, which is why an area reads markedly lighter than the palette color its legend swatch shows. Raise it to `1` for solid stacked bands. The outline draws at `strokeWidth: 2`, `lineType: 'solid'`, `strokeAlpha: 1`. `style.geom.area` declares `color`, `alpha`, `saturation`, `strokeWidth`, `lineType` and `strokeAlpha`.
## Related
* [Styling](/sdk-next/config/styling) — the stylesheet, its cascade and every target
* [Line](/sdk-next/graph-types/line) — an unfilled outline, or a fading gradient fill via its `fillAlpha` style property
* [Geoms & layers](/sdk-next/concepts/geoms) — stacking and position modes
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.