Area Chart

The Area Chart renders filled areas beneath lines, making it easy to compare cumulative totals or show how individual series contribute to a whole. It supports stacked mode (areas stacked on top of each other), per-series opacity and line interpolation, and includes crosshair, grid, tooltips, and a legend. On entry the area is revealed left-to-right as the line draws on, and it transitions smoothly between data states on update.

NOTE

For the full API, see the Charts API Reference.

Example

Usage

import {
    createAreaChart,
} from '@ripl/charts';

const chart = createAreaChart('#container', {
    data: [/* ... */],
    key: 'month',
    stacked: false,
    series: [
        { id: 'desktop', value: 'desktop', label: 'Desktop' },
        { id: 'mobile', value: 'mobile', label: 'Mobile' },
    ],
});

Data Format

Each item should contain a key field and one or more numeric value fields:

const data = [
    { month: 'Jan',
        desktop: 620,
        mobile: 340 },
    { month: 'Feb',
        desktop: 780,
        mobile: 290 },
    { month: 'Mar',
        desktop: 550,
        mobile: 410 },
];

Variants

Stacked

Stack series to show cumulative totals:

createAreaChart('#container', {
    data,
    key: 'month',
    stacked: true,
    series: [
        { id: 'desktop',
            value: 'desktop',
            label: 'Desktop',
            opacity: 0.4 },
        { id: 'mobile',
            value: 'mobile',
            label: 'Mobile',
            opacity: 0.4 },
    ],
});

Custom opacity and line type

createAreaChart('#container', {
    data,
    key: 'month',
    series: [
        { id: 'desktop',
            value: 'desktop',
            label: 'Desktop',
            opacity: 0.2,
            lineType: 'monotoneX' },
        { id: 'mobile',
            value: 'mobile',
            label: 'Mobile',
            opacity: 0.6,
            lineType: 'step' },
    ],
});

Options

data — The data array
series — Array of series with id, value, label, optional color, opacity, lineType, lineStyle ('solid' | 'dashed' | 'dotted' | custom dash array), lineWidth, markers
key — Key accessor for data points
stacked — Stack series on top of each other (default false)
grid — boolean | ChartGridOptions — Show/configure grid lines (default true)
crosshair — boolean | ChartCrosshairOptions — Show/configure crosshair (default true)
tooltip — boolean | ChartTooltipOptions — Show/configure tooltips (default true)
legend — boolean | ChartLegendOptions — Show/configure legend
axis — boolean | ChartAxisOptions — Configure x/y axes

Area Chart ​

Example ​

Usage ​

Data Format ​

Variants ​

Stacked ​

Custom opacity and line type ​

Options ​