> ## 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 = 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${buildArgsString(args)}` : src;
  const resolvedAspectRatio = aspectRatio ?? (story ? '16 / 9' : '10 / 6');
  return <iframe src={resolvedSrc} loading="lazy" allowfullscreen="true" style={{
    width: '100%',
    aspectRatio: resolvedAspectRatio,
    border: 'none',
    borderRadius,
    colorScheme: 'light'
  }} />;
};

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

<GraphEmbed story="chart-types-area-graph--simple" />

```tsx theme={null}
import { useMemo } from 'react';
import { createSpec, pipe, geom, scale } from '@graphysdk/viz-engine';
import { GraphProvider, GraphRenderer } from '@graphysdk/react-renderer';

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 (
    <GraphProvider input={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}
```

## 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`:

<GraphEmbed story="chart-types-area-graph--stacked" />

```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()
);
```

Use `position: 'fill'` instead for a 100% stacked area, where each band shows its share of the total.

## 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}
const spec = pipe(
  createSpec({ x: 'month', y: 'revenue' }),
  geom.area(),
  geom.point({ interactive: false, params: { size: 6 } }),
  scale.x(),
  scale.y()
);
```

`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.

## Options

`geom.area()` shares the line's rendering knobs:

<ParamField path="params.interpolate" type="'linear' | 'catmull-rom'" default="linear">
  Curve family. `'catmull-rom'` smooths the outline through every point.
</ParamField>

<ParamField path="params.lineWidth" type="number | 'auto'">
  Outline stroke width in pixels.
</ParamField>

<ParamField path="params.missingValues" type="'gap' | 'connect' | 'zero'" default="gap">
  How the outline handles `null` values: break at the gap, span it, or treat as
  zero.
</ParamField>

## Related

* [Line](/sdk-next/graph-types/line) — an unfilled outline, or a fading gradient fill via `showFill`
* [Geoms & layers](/sdk-next/concepts/geoms) — stacking and position modes