Components · Data

Chart

Any series on a live screen: stepped line, smooth line or grouped bars. Legend with a readout per series, hover cursor, optional band strip and a printed scale.

jsx

import { Chart } from '@andeus/ui';

Step (default)

This year+196.2%Last year+161.1%Dec

Revenue, this year against last

jsx

<Chart startLabel="Jan" endLabel="Dec" label="Revenue, this year against last"
  series={[
    { label: 'This year', values: thisYear },
    { label: 'Last year', values: lastYear }
  ]} />

Bars

Visitors28Sign-ups6Sun

jsx

<Chart type="bar" summary="last" startLabel="Mon" endLabel="Sun"
  cursorLabel={(i) => days[i]}
  series={[{ label: 'Visitors', values: visitors }, { label: 'Sign-ups', values: signups }]} />

With a band

Requests355.59ErrorsNow

jsx

<Chart summary="last" startLabel="00:00" endLabel="Now"
  series={[{ label: 'Requests', values: requests, color: 'var(--screen-green)' }]}
  band={{ values: errors, label: 'Errors' }} />

Props

Prop	Type	Default
series	`Array<{ label, values: number[], color? }>`	sample	Colours cycle blue, yellow, green, orange, red.
type	`'step' \| 'line' \| 'bar'`	'step'
band	`{ values, label?, color? }`	—	Strip along the bottom.
summary	`'change' \| 'last' \| 'none'`	'change'	Legend readout.
format	`(v: number) => string`	—	For summary 'last'.
cursorLabel	`(i: number) => string`	—	Top-right while hovering.
startLabel	`string`	—
endLabel	`string`	—
height	`number`	240
scale	`boolean`	true	Printed ticks under the bezel.
grid	`boolean`	true
label	`string`	—	Caption.

PreviousIcon NextMetric