Area

An area chart is a line with the region beneath it filled. Use geom.area() to emphasize 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 spec={spec} data={data}>
      <GraphRenderer />
    </GraphProvider>
  );
}

Stacked area

Map a group column to color and stack the bands for a part-to-whole trend. The data is long: 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.discrete()
);

'stack' is the area geom’s default, so the position above is written out for clarity. Use position: 'fill' for a 100% stacked area, where each band shows its share of the total. Use 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 observations. 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-testing, so the area owns hover: it picks the nearest point along the x-axis and drives the tooltip. Interactive points would fire hover only when the cursor lands on a dot. Marker size is paint, so it comes from the stylesheet: style.geom.point({ size }), default 8. Give the layer an id and scope the entry with { layer } so the size applies to these dots and nothing else. 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.discrete()
);

Area params

geom.area() takes the same curve param as the line, and handles nulls its own way:

'linear' | 'smooth'

default:"linear"

Curve family. 'smooth' 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 treated as 'zero', since an area cannot draw 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({ fillAlpha: 1, strokeWidth: 3 })] });

The built-in fill is fillAlpha: 0.3, which is why an area reads lighter than the palette color in its legend swatch. Raise it to 1 for solid stacked bands. The outline draws at strokeWidth: 2, dashArray: [] and strokeAlpha: 1. style.geom.area takes fill, stroke, alpha, fillAlpha, strokeAlpha, saturation, strokeWidth and dashArray.

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

Themes

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