Bars

Live demo

Weekly volume

How to use it

A compact bar chart for a short series (a week, ten periods), with one highlighted bar in the theme's spark color.

Provide data, optionally labels, highlight (defaults to the last bar), height (default 64) and label for screen readers.
Inside a hero card the track uses --e-track; elsewhere it is a 10% tint of ink.
Bars grow from the baseline with a slight overshoot on first view.

Don't: use it for more than about 14 values, axes with gridlines, or more than one highlighted bar.

In every theme

Follows the mode picked in the header.

Graphite

Glass

Paper

Mineral

Enamel

Ember

Code

React

import { Bars } from 'enma/react';

<Bars data={[38, 52, 44, 70, 58, 82, 96]} labels={['M', 'T', 'W', 'T', 'F', 'S', 'S']} />

Plain HTML

<div class="e-bars is-in" style="height:64px" role="img" aria-label="Weekly volume: Monday 38, Tuesday 52, Wednesday 96">
  <i class="e-bars__bar" style="height:40%"></i>
  <i class="e-bars__bar" style="height:54%"></i>
  <i class="e-bars__bar is-on" style="height:100%"></i>
</div>

Props

`BarsProps`

Props of BarsProps
Prop	Type	Default	Description
`data` required	number[]
`labels`	string[]
`highlight`	number	the last one	Index of the highlighted bar. Default: the last one.
`max`	number
`height`	number	64
`label`	string	lists every label and value	Accessible summary. Default lists every label and value.
`className`	string
`style`	React.CSSProperties