Area chart
A line chart with the region under each line filled — every line-chart attribute, plus a fill opacity.
An area chart is a line chart plus a fill, so c2-area-chart extends c2-line-chart and every one of
its attributes — curve, points, zoom, x-type, the axis bounds — means exactly the same thing here.
The one addition is fill-opacity.
Reach for it when the quantity under the line is the point (volume, sessions, spend accumulating over a period) and for a single series or two. Stacked bands are not drawn: several filled series overlap, so past two or three the line chart reads better.
Installation
npm install @c2n/chart uplotUsage
These are different views of the same France 2015–2024 extract from the public Our World in Data Energy dataset, measured in terawatt-hours. The shared source keeps the area, line, bar, pie and sparkline examples directly comparable.
The fill
fill-opacity takes a number from 0 to 1 and is applied to each series’ palette colour. Left unset, the
chart reads --c2-chart__area--opacity from the host instead (0.15 by default), which is the variable to
set when the value belongs to the theme rather than to one chart.
.reports c2-area-chart {
--c2-chart__area--opacity: 0.28;
--c2-chart__line--width: 3px;
}Data, realtime and sizing
Identical to the line chart: rows plus c2-chart-series children, appendPoint() for a live feed,
max-points for a bounded window, and --c2-chart--height plus the layout’s width for the box. See
Line chart for the details.
Theming
Every chart in the package reads the same --c2-chart__* variables, so setting them once themes all of
them. The series palette is --c2-chart__series-1--color through --c2-chart__series-8--color, wired by
@c2n/theme to the --c2-theme--chart-series-* tokens. Because the plot is a canvas, these are read with
getComputedStyle and handed to the engine — so they behave like any other CSS variable, including under a
dark theme, but cannot be reached with ::part().