All components (204)

Area chart

Data · AreaChart

What it is and when to use it

The same as LineChart, with the area under each line filled: the evolution of one or several series over the same categories, with the weight of each one in view. It shares the data, the scale, the legend and the table with LineChart and StackedBarChart.

The drawing is decoration and the table is the data: below it there is a real table (one row per category, one column per series), hidden from view unless tableVisible is set. Hovering a category shows the values of every series.

When to use it

A volume that builds up over time: sales, visits, hours.
stacked stacks the series: the top edge is the total and each layer, what each one contributes. When stacking, a gap (null) counts as zero. Without stacked the areas overlap, translucent, and two or three of them work best; a null is a gap and breaks the area there.
The axis always starts at zero, because an area that starts somewhere else exaggerates the differences; min and max fix the scale by hand, to compare two charts.
format writes the values (euros, percentages) on the axis, on hover, in the summary and in the table; categoryName is the header of the first column of the table.

When not to

Comparing the shape of several series without a fill, or with the axis fitted to the data: LineChart.
A few categories where the total of each one matters: StackedBarChart.
Parts of a total at a single moment: DonutChart.

Keyboard: none: there is nothing to press. The complete data is in the table.

Accessibility: the drawing is an image (role="img") with a written summary ("2 series, 9 points. Shop: from €4,200 to €7,800, peaking at €7,800 in Sep. …") and the table is always there for the screen reader. Colour is never the only clue: the legend (by default, only with more than one series) and the summary carry the name of each series.

Fine-tuning: CSS variables --amset-series-*: -axis, -cap, -footer, -height, -label and -stroke. The size moves the height (10, 14 or 18 rem); height wins if passed. The colour of each series comes from its tone, and the fill is that colour at 22 %.

What it looks like

Chart type

Lines

Stacked areasStacked bars

Store
Online
Wholesale

Total sales by channel
Month	Store	Online	Wholesale
Jul	6,900	5,100	1,900
Aug	5,200	5,600	2,400
Sep	7,800	6,300	2,800

<AreaChart
  label="Total sales by channel"
  categories={['Jul', 'Aug', 'Sep']}
  series={canales}
  categoryName="Month"
  stacked
  tableVisible
/>

Props

Import it with import { AreaChart } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`categories`required	`readonly string[]`	What goes on the bottom axis: the months, the days. One per value of each series.
`label`required	`string`	What is being measured. Required: a chart without a title does not inform.
`series`required	`readonly ChartSeries[]`	—
`axes`	`boolean`	Background lines with their number.
`categoryName`	`string`	What the first column of the table is called. By default, "Period".
`className`	`string`	Merged with the library classes; it does not replace them.
`format`	`(value: number) => string`	—
`height`	`number`	Height of the drawing in pixels. By default, that of the size.
`legend`	`boolean`	The legend with the name of each series. By default, only if there is more than one.
`max`	`number`	—
`min`	`number`	Minimum and maximum of the axis set by hand, to compare two charts on the same scale.
`size`	`"sm" \| "md" \| "lg"`	—
`stacked`	`boolean`	The series are added on top of each other: the total area is the sum. By default, `false` (they overlap).
`tableVisible`	`boolean`	Also shows the table. For the screen reader it is always there.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: