LineChart

Shows how values change over an ordered axis such as time. Lines are drawn as SVG in the token colors, scale to their container and can be inspected by pointer or keyboard.

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

Basic

Pass the values as series and one label per point as labels. formatValue formats the y-axis, the tooltip and the screen-reader table.

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

export default function Basic() {
    return (
        <LineChart
            className="w-full"
            aria-label="CPU load over the day"
            labels={['00', '03', '06', '09', '12', '15', '18', '21']}
            series={[{ id: 'cpu', label: 'CPU', data: [18, 12, 15, 48, 72, 66, 51, 30] }]}
            formatValue={(v) => `${v}%`}
        />
    );
}

Data format

All three charts (LineChart, AreaChart and BarChart) take the same data:

import type { ChartSeries } from 'jarvis-react-ui';

const series: ChartSeries[] = [
    { id: 'cpu', label: 'CPU', data: [18, 12, 48, 72] },
    { id: 'gpu', label: 'GPU', data: [10, 8, 32, 88], color: 'warning' },
];

color is one of accent, bright, success, warning, error or muted. Without it, series get colors in that order. The colors are the theme tokens, so charts follow theming.

Multiple series and curves

curve="smooth" draws curved lines; showDots marks every point. The legend appears automatically for more than one series (showLegend overrides it).

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

export default function MultiSeries() {
    return (
        <LineChart
            className="w-full"
            aria-label="Core temperatures"
            labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']}
            curve="smooth"
            showDots
            series={[
                { id: 'core', label: 'Core', data: [61, 64, 70, 68, 75, 72, 66] },
                {
                    id: 'shell',
                    label: 'Shell',
                    data: [40, 42, 47, 46, 51, 49, 44],
                    color: 'success',
                },
                { id: 'limit', label: 'Limit', data: [80, 80, 80, 80, 80, 80, 80], color: 'error' },
            ]}
            formatValue={(v) => `${v}°`}
        />
    );
}

Live data

Charts are plain props-in, SVG-out components: update series and they redraw. Fix the axis with yMin / yMax so it does not jump while the values move.

import { useEffect, useState } from 'react';
import { LineChart } from 'jarvis-react-ui';

const WINDOW = 24;

function nextValue(prev: number): number {
    return Math.max(0, Math.min(100, prev + (Math.random() - 0.5) * 18));
}

export default function Live() {
    const [data, setData] = useState(() => Array.from({ length: WINDOW }, () => 40));

    useEffect(() => {
        const id = setInterval(() => {
            setData((d) => [...d.slice(1), nextValue(d[d.length - 1] ?? 40)]);
        }, 800);
        return () => clearInterval(id);
    }, []);

    return (
        <LineChart
            className="w-full"
            aria-label="Live uplink throughput"
            series={[{ id: 'uplink', label: 'Uplink', data, color: 'success' }]}
            labels={data.map((_, i) => `${i - WINDOW + 1}s`)}
            yMin={0}
            yMax={100}
            formatValue={(v) => `${Math.round(v)} MB/s`}
            height={160}
        />
    );
}

Axis

The y-axis range comes from the data, rounded to "nice" ticks (yTicks sets the approximate count). yMin and yMax override it. X labels are thinned out automatically when there are many points.

Accessibility

• The chart has an accessible name from aria-label (required).
• A visually hidden table lists all values for screen readers.
• Hover shows a tooltip with all series at that position. For keyboard users the chart contains a focusable inspection control: Tab to it and use the arrow keys to move between positions; the current values are announced.
• Colors are not the only signal: the legend, tooltip and table name every series.

API

Type ChartSeries

One data series of a LineChart, AreaChart or BarChart.

Type ChartColor

Token color of a chart series.

type ChartColor = 'accent' | 'bright' | 'success' | 'warning' | 'error' | 'muted';