All components (244)

Line chart

Data · LineChart · .amset-series

What it is and when to use it

Lines for several series over the same categories: sales per month, visits per day, temperature per hour. A null value is a gap and breaks the line there. It shares data, scale, legend and table with AreaChart (Area chart) and StackedBarChart (Stacked bars), which have their own card.

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

Evolution over time of one to five series, with a few dozen points.
zeroBased makes the axis start at zero (by default it fits the data, with round numbers); min and max fix the scale so two charts can be compared.
format to write the values (euros, percentages); categoryName is the header of the first column of the table.
markers={false} removes the points when there are many.

When not to

A tiny line inside a card: Trend.
The volume under the line, or several series that add up: AreaChart. The total of a few categories and its split: StackedBarChart.
Comparing unordered categories: BarChart. Parts of a total: DonutChart.
Thousands of points or fine interaction (zoom, selection): a charting library.

Keyboard: by default none: there is nothing to press. With toggleSeries the legend is a row of buttons (Tab and Enter or Space hide or restore a series) and with onPointPress every value in a category tooltip is a button reached with Tab. The complete data is in the table.

Accessibility: the drawing is an image (role="img") with a written summary ("3 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 and the summary carry the name of each series.

Fine-tuning: CSS variables --amset-series-*: -axis, -bar, -cap, -footer, -height, -label, -stroke. The size moves the height (10, 14 or 18 rem); height wins if passed.

What it looks like

Web
Store

Sales by channel
Period	Web	Store
Jan	1,200	800
Feb	1,350	760
Mar	1,100
Apr	1,700	900
May	1,900	1,050
Jun	2,100	980

Web
Store

Stacked sales by channel
Period	Web	Store
Jan	1,200	800
Feb	1,350	760
Mar	1,100
Apr	1,700	900
May	1,900	1,050
Jun	2,100	980

Web
Store

Sales by month and channel
Period	Web	Store
Jan	1,200	800
Feb	1,350	760
Mar	1,100
Apr	1,700	900
May	1,900	1,050
Jun	2,100	980

<LineChart label="Sales by channel" categories={meses} series={ventas} />
<AreaChart label="Stacked sales by channel" categories={meses} series={ventas} stacked />
<StackedBarChart label="Sales by month and channel" categories={meses} series={ventas} />

Props

Import it with import { LineChart } 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.
`hiddenSeries`	`readonly string[]`	The keys of the hidden series, when the chart's user keeps them. Without it, the chart keeps them itself.
`legend`	`boolean`	The legend with the name of each series. By default, only if there is more than one.
`markers`	`boolean`	A point on every value. By default, `true`.
`max`	`number`	—
`min`	`number`	Minimum and maximum of the axis set by hand, to compare two charts on the same scale.
`onHiddenSeriesChange`	`(hidden: readonly string[]) => void`	Called with the hidden keys after a legend entry is pressed.
`onPointPress`	`(point: ChartPoint) => void`	Makes every value pressable (in the tooltip of its category, also by keyboard and touch) and hands over the pressed point.
`referenceBands`	`readonly ChartReferenceBand[]`	Horizontal reference bands: an acceptable range.
`referenceLines`	`readonly ChartReferenceLine[]`	Horizontal reference lines: a target, an average.
`size`	`"sm" \| "md" \| "lg"`	—
`tableVisible`	`boolean`	Also shows the table. For the screen reader it is always there.
`toggleSeries`	`boolean`	The legend stops being a label and each entry becomes a button that hides or restores its series. `false` by default.
`zeroBased`	`boolean`	With `true` the axis starts at zero even if the data is far from it. By default, it fits the data.

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

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-series-axis`	`3rem`
`--amset-series-footer`	`1.5rem`
`--amset-series-cap`	`1rem`
`--amset-series-height`	`14rem`
`--amset-series-bar`	`3.5rem`
`--amset-series-stroke`	`2px`
`--amset-series-label`	`var(--amset-text-xs)`

How to change it

.amset-series {
  --amset-series-axis: ...;
  --amset-series-footer: ...;
}

In the test bench

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