Area Chart
The Area Chart fills the band between each line series and the baseline, so a total reads as area rather than as height. Use it when the composition of a total over time is the point: stacked: true stacks the series into that whole, stacked: 'percent' normalizes each category to 100%, and leaving it off overlays them. Each series carries its own fillOpacity, lineType and markers, and the chart draws a crosshair, grid, tooltips and a legend. Overlaid areas are painted largest-first so a smaller area is never hidden behind a larger one. On entry the area is revealed left-to-right as the line draws on, and it transitions between data states on update. It renders to Canvas, SVG or a terminal context from the same options.
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',
fillOpacity: 0.4,
},
{
id: 'mobile',
value: 'mobile',
label: 'Mobile',
fillOpacity: 0.4,
},
],
});100% stacked
Pass stacked: 'percent' to normalize each category to its share of the category total. The value axis is fixed to 0–100% and values default to percentage formatting:
createAreaChart('#container', {
data,
key: 'month',
stacked: 'percent',
series: [
{
id: 'desktop',
value: 'desktop',
label: 'Desktop',
},
{
id: 'mobile',
value: 'mobile',
label: 'Mobile',
},
],
});Secondary y-axis
Supply a second axis.y entry to render a right-hand axis, and bind a series to it with the series yAxis option, naming the axis's id. When the chart is stacked, series stack per axis group:
createAreaChart('#container', {
data,
key: 'month',
series: [
{
id: 'sessions',
value: 'sessions',
label: 'Sessions',
},
{
id: 'conversion',
value: 'conversion',
label: 'Conversion %',
yAxis: 'conversion',
},
],
axis: {
y: [
{
id: 'sessions',
title: 'Sessions',
},
{
id: 'conversion',
title: 'Conversion %',
format: 'percentage',
},
],
},
});Custom opacity and line type
createAreaChart('#container', {
data,
key: 'month',
series: [
{
id: 'desktop',
value: 'desktop',
label: 'Desktop',
fillOpacity: 0.2,
lineType: 'monotoneX',
},
{
id: 'mobile',
value: 'mobile',
label: 'Mobile',
fillOpacity: 0.6,
lineType: 'step',
},
],
});Segmented line styles
lineStyle also accepts spans anchored to data keys, so one line can change style along its length — actuals solid and a forecast dashed, say. The line is still a single polyline, so the draw-on animation and point morphing are unaffected.
createAreaChart('#container', {
data,
key: 'month',
series: [
{
id: 'revenue',
value: 'revenue',
label: 'Revenue',
lineStyle: [
{
from: 'Feb',
to: 'Jun',
style: 'dashed',
},
{
// A function receives the dataset and returns the key to anchor to.
from: data => data[data.length - 3].month,
style: 'dotted',
},
],
},
],
});from defaults to the start of the line and to — which is inclusive — to its end. Use the object form to name the fallback style explicitly:
createAreaChart('#container', {
data,
key: 'month',
series: [
{
id: 'revenue',
value: 'revenue',
label: 'Revenue',
lineStyle: {
default: 'solid',
segments: [
{
from: 'Feb',
to: 'Jun',
style: 'dashed',
},
],
},
},
],
});See the line chart for the full rules.
Options
A full configuration for this chart. The options every chart shares — padding, title, animation, theme and the rest — behave the same everywhere and are documented on Shared Options.
createAreaChart('#container', {
data,
key: 'month',
labels: true,
format: 'number',
// `stacked` shares one cumulative scale across a group, so it is shown on its own in Variants
// above rather than combined with the second axis here.
series: [
{
id: 'sessions',
value: 'sessions',
label: 'Sessions',
color: '#7cacf8',
lineType: 'monotoneX',
lineStyle: 'solid',
lineWidth: 2,
fillOpacity: 0.3,
markers: true,
yAxis: 'sessions',
},
{
id: 'conversion',
value: 'conversion',
label: 'Conversion %',
color: '#6dd5b1',
yAxis: 'conversion',
},
],
axis: {
y: [
{
id: 'sessions',
title: 'Sessions',
},
{
id: 'conversion',
position: 'right',
title: 'Conversion %',
format: 'percentage',
},
],
},
});Events
Subscribe with chart.on(...). A handler receives an Event object, not the payload directly — the payload is on event.data, and carries the interacted datum plus its { x, y } anchor in chart pixels. event.target and event.stopPropagation() are also available.
// Emitted when a marker is clicked.
chart.on('markerclick', event => console.log(event.data)); // event.data: AreaChartMarkerEvent
// Emitted when the pointer enters a marker.
chart.on('markerenter', event => console.log(event.data)); // event.data: AreaChartMarkerEvent
// Emitted when the pointer leaves a marker.
chart.on('markerleave', event => console.log(event.data)); // event.data: AreaChartMarkerEvent