Sparkline

A small chart without axes, for a row of a list or a tile. Its total is in a tooltip, and a screen reader hears the label with the total.

import { Sparkline } from '@adecore/charts';

import { Sparkline } from '@adecore/charts';
import { formatNumber, formatTokens } from '@adecore/ui/format';
import { eventsPerService, tokensPerDay } from '../shared/chart-data.ts';

const services = eventsPerService();
const tokens = tokensPerDay().map((day) => day.input + day.output);

export default function SparklineRowDemo() {
    return (
        <div className="flex w-full max-w-md flex-col gap-6">
            <ul className="flex flex-col divide-y divide-border-soft">
                {services.map((service) => (
                    <li key={service.name} className="flex h-10 items-center gap-3 text-sm">
                        <span className="w-24 font-mono text-text">{service.name}</span>
                        <Sparkline values={service.perDay} kind="bars" label={`Events of ${service.name} in 14 days`} width={82} height={16} />
                        <span className="ml-auto text-text-muted tabular-nums">{formatNumber(service.perDay.reduce((sum, count) => sum + count, 0))}</span>
                    </li>
                ))}
            </ul>
            <div className="flex items-center gap-3 text-sm">
                <span className="w-24 text-text-muted">Tokens</span>
                <Sparkline values={tokens} label="Tokens in 14 days" tone="running" format={formatTokens} width={160} />
            </div>
        </div>
    );
}

<Sparkline values={perDay} kind="bars" label="Events of api in 14 days" width={82} height={16} />
<Sparkline values={tokens} label="Tokens in 14 days" tone="running" format={formatTokens} width={160} />

kind="bars" draws a rounded column per value, 2px apart, as wide as the width allows: 14 values in 82px make columns of 4px. A column is rounded by half its width, and the smallest count is 4px tall, so it reads as a bar rather than a dot, and a zero is a one-pixel baseline in --border-strong so a quiet day still shows; kind="line" (the default) draws a line, broken by a missing value. It is one tab stop, so the tooltip opens on the keyboard too.

Prop	Type	Default
values	readonly (number | null)[]		Required.
label	string		Required. What the values are, such as "events in 14 days".
kind	'line' | 'bars'	'line'
tone	ChartColor	'accent'
format	(value: number) => string	formatNumber	Writes the total.
width, height	number	96, 24	Pixels.
className, ref			On the <svg>.

The props are SparklineProps.