Sparkline

An inline SVG that scales to its values. Pass a label so the trend is announced, not just drawn.

import { Sparkline } from '@andrewbehma/glass-ui';

Playground

Sparkline.tsx

import { Sparkline } from '@andrewbehma/glass-ui';

<Sparkline
  values={[3, 5, 4, 8, 7, 11, 9, 14, 13, 18, 16, 21]}
  label="Signups, last 12 days"
  tone="accent"
  area
  width={220}
  height={48}
/>

States

Each tile is the live component. Open one in the playground to keep tweaking it.

Accent
Ok
Danger