Area

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

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 (
    <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:

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

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 — 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:

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:

'linear' | 'catmull-rom'

default:"linear"

Curve family. 'catmull-rom' smooths the outline through every point.

'zero' | 'connect'

default:"zero"

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, through the style.geom.area target:

styles({ defaults: [style.geom.area({ alpha: 1, strokeWidth: 3 })] });

The built-in fill is alpha: 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.

Styling — the stylesheet, its cascade and every target
Line — an unfilled outline, or a fading gradient fill via its fillAlpha style property
Geoms & layers — stacking and position modes

Get Started

Core concepts

Chart types

Annotations & emphasis

Rendering

Configuration

Advanced

Extending

Basic example

Stacked area

Points on the area

Area params

Painting the band

​Basic example

​Stacked area

​Points on the area

​Area params

​Painting the band

​Related

Basic example

Stacked area

Points on the area

Area params

Painting the band

Related