LineChart

Live demo

Revenue

+60%

How to use it

A line or area chart for a series over time, with an optional comparison series, in the theme's spark color.

Provide data, and optionally compare (drawn as a quiet dashed line, for "this period vs last"), labels, height (default 160), area (default on), min, max and label for screen readers.
The series uses --e-bar-on: the theme's accent ink on surfaces, the hero's own color inside a hero card. The fill under it is a soft tint of the same color.
The line draws itself once on first view and stays still under reduced motion. The default text summary names the range, the latest value and the peak.
Paper draws a thinner, square-ended line; Enamel a thicker one.

Do: show a few axis labels (first, middle, last). Don't: more than two series, gridlines, legends for a single series, dual axes.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { LineChart } from 'enma/react';

<LineChart
  data={[32, 35, 34, 41, 39, 46, 52, 49, 58, 61, 66, 72]}
  compare={[30, 31, 33, 34, 35, 36, 38, 39, 41, 42, 44, 45]}
  labels={['Jan', 'Jun', 'Dec']}
  label="Revenue this year against last year, from $32k in January to $72k in December"
/>

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

Props

`LineChartProps`

Props of LineChartProps
Prop	Type	Default	Description
`data` required	number[]
`compare`	number[]		A second series drawn as a quiet dashed line, for "this period vs last period".
`labels`	string[]		Axis labels under the chart. Show a few (first, middle, last) rather than every point.
`height`	number	160	Height in px. Default 160.
`area`	boolean	true	Fill the area under the line with a soft tint of the series color. Default true.
`min`	number	0, or the lowest value when the data goes below 0	Lowest value on the scale. Default 0, or the lowest value when the data goes below 0.
`max`	number	the highest value	Highest value on the scale. Default: the highest value.
`label`	string	describes the range, the latest value and the peak	Accessible summary. Default describes the range, the latest value and the peak.
`className`	string
`style`	React.CSSProperties