Sparkline

Live demo

Active seats

Churn

How to use it

A word-sized trend line beside a number: in a KPI tile, a table cell or a list row.

Provide data, and optionally width (default 96), height (default 28) and label.
The line uses the theme's spark color and ends in a dot on the latest value. The default summary reads "Trend from 4 to 9".
It scales to its own range, so it shows direction, not magnitude. Put the actual number next to it.

Don't: use it as the only place a value appears, or add axes.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { Sparkline, Stat } from 'enma/react';

<Stat label="Active seats" value={1284} />
<Sparkline data={[1020, 1080, 1110, 1150, 1190, 1240, 1284]} />

This component needs JavaScript for its behaviour. Outside React, port it with the same classes and props, as described in Other platforms.

Props

`SparklineProps`

Props of SparklineProps
Prop	Type	Default	Description
`data` required	number[]
`width`	number	96	Width in px. Default 96.
`height`	number	28	Height in px. Default 28.
`label`	string	describes the first and latest values	Accessible summary. Default describes the first and latest values.
`className`	string
`style`	React.CSSProperties