Sparkline

A tiny line chart with a soft fill, without axes or labels. Use it to show the trend of a reading next to its current value.

import { Sparkline } from 'jarvis-react-ui';

Variants

accent (the default) draws the line in the accent color; warn uses the warning color for a series that is out of range.

import { Label, Sparkline } from 'jarvis-react-ui';

const CPU = [32, 41, 38, 45, 52, 48, 61, 57, 49, 44, 51, 47];
const TEMP = [61, 63, 66, 70, 74, 79, 83, 86, 85, 88, 91, 90];

export default function Variants() {
    return (
        <div className="flex w-full max-w-[320px] flex-col gap-4">
            <div className="flex flex-col gap-1">
                <Label>CPU load</Label>
                <Sparkline data={CPU} aria-label="CPU load, last 12 samples" />
            </div>
            <div className="flex flex-col gap-1">
                <Label>Core temp</Label>
                <Sparkline data={TEMP} variant="warn" aria-label="Core temperature, rising" />
            </div>
        </div>
    );
}

Scaling and height

The series is scaled between its own minimum and maximum, so the shape always fills the chart. The line stretches to the full width of its container; height sets the height in pixels (28 by default). At least two values are needed to draw a line.

import { Sparkline } from 'jarvis-react-ui';

const SIGNAL = [12, 18, 9, 22, 30, 26, 35, 28, 40, 33, 45, 38, 50, 42];

export default function Height() {
    return (
        <div className="flex w-full max-w-[320px] flex-col gap-4">
            <Sparkline data={SIGNAL} height={16} />
            <Sparkline data={SIGNAL} />
            <Sparkline data={SIGNAL} height={56} />
        </div>
    );
}

width only sets the width of the internal coordinate system. Because the SVG stretches, it rarely needs changing.

Live data

Keep a fixed-length array in state and append new samples while dropping the oldest. Combine it with a Metric for the current value, and switch variant when a threshold is crossed.

import { useEffect, useState } from 'react';
import { Label, Metric, Sparkline } from 'jarvis-react-ui';

const SAMPLES = 30;

export default function Live() {
    const [data, setData] = useState<number[]>(() => Array.from({ length: SAMPLES }, () => 50));

    useEffect(() => {
        const id = setInterval(() => {
            setData((prev) => {
                const last = prev[prev.length - 1] ?? 50;
                const next = Math.max(0, Math.min(100, last + (Math.random() - 0.5) * 20));
                return [...prev.slice(1), next];
            });
        }, 500);
        return () => clearInterval(id);
    }, []);

    const current = Math.round(data[data.length - 1] ?? 0);
    const high = current > 80;

    return (
        <div className="flex w-full max-w-[320px] flex-col gap-1">
            <div className="flex items-baseline justify-between">
                <Label>Network throughput</Label>
                <Metric value={current} unit="Mb/s" warn={high} small />
            </div>
            <Sparkline
                data={data}
                variant={high ? 'warn' : 'accent'}
                height={40}
                aria-label="Network throughput, live"
            />
        </div>
    );
}

Accessibility

• Without aria-label the SVG has no role and no name; screen readers skip over it. Use this when the current value is already shown as text next to it.
• With aria-label the SVG gets role="img". Describe the trend in words ("CPU load, rising"), since the individual values are not exposed.

API