BarChart

Compares values across categories. Several series are grouped side by side or stacked into one bar per category; negative values grow downward from zero.

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

Grouped

Each category gets one bar per series, side by side.

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

export default function Grouped() {
    return (
        <BarChart
            className="w-full"
            aria-label="Network traffic per hour"
            labels={['00', '04', '08', '12', '16', '20']}
            series={[
                { id: 'in', label: 'Inbound', data: [12, 30, 22, 41, 18, 9] },
                { id: 'out', label: 'Outbound', data: [8, 14, 19, 25, 12, 6], color: 'bright' },
            ]}
            formatValue={(v) => `${v} GB`}
        />
    );
}

Stacked

stacked puts the series on top of each other, so the bar height is the total.

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

export default function Stacked() {
    return (
        <BarChart
            className="w-full"
            aria-label="Requests by status"
            labels={['Mon', 'Tue', 'Wed', 'Thu', 'Fri']}
            stacked
            series={[
                { id: 'ok', label: '2xx', data: [920, 1040, 980, 1210, 1130], color: 'success' },
                { id: 'warn', label: '4xx', data: [40, 52, 38, 61, 44], color: 'warning' },
                { id: 'err', label: '5xx', data: [6, 3, 18, 4, 2], color: 'error' },
            ]}
        />
    );
}

Negative values

The y-axis always includes zero. Positive bars grow up from it, negative bars grow down.

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

export default function Delta() {
    return (
        <BarChart
            className="w-full"
            aria-label="Battery charge change per hour"
            labels={['08', '09', '10', '11', '12', '13', '14']}
            series={[{ id: 'delta', label: 'Change', data: [12, 8, -4, -15, -6, 9, 14] }]}
            formatValue={(v) => `${v > 0 ? '+' : ''}${v}%`}
            height={160}
        />
    );
}

Data, colors and axis

BarChart takes the same series, labels, colors and axis props as LineChart. Hovering a category dims the others.

Accessibility

Same as LineChart: aria-label, a screen-reader table, and a keyboard inspection control (Tab, then arrow keys).

API

Prop	Type	Default	Description
`aria-label` (required)	`string`		Accessible name of the chart; also the caption of the screen-reader data table.
`series` (required)	`ChartSeries[]`		Data series to draw.
`className`	`string`		Additional class names for the root element.
`formatValue`	`((value: number) => string)`		Formats values on the y-axis and in the tooltip.
`height`	`number`	`200`	Height of the plot in pixels (axes and legend add to it).
`labels`	`string[]`		X-axis labels, one per data point. Defaults to `1, 2, 3, …`.
`showGrid`	`boolean`	`true`	Draws horizontal grid lines at the y ticks.
`showLegend`	`boolean`		Shows the legend; defaults to `true` for more than one series.
`showTooltip`	`boolean`	`true`	Shows the hover/keyboard tooltip with the values at a position.
`stacked`	`boolean`	`false`	Stacks the series into one bar per position instead of grouping them side by side.
`yMax`	`number`		Upper bound of the y-axis; computed from the data when omitted.
`yMin`	`number`		Lower bound of the y-axis; computed from the data when omitted.
`yTicks`	`number`	`4`	Approximate number of y-axis ticks.

Type `ChartSeries`

One data series of a LineChart, AreaChart or BarChart.

Field	Type	Description
`data` (required)	`number[]`	One value per x position (same length as `labels`).
`id` (required)	`string`	Unique id of the series.
`label` (required)	`string`	Name shown in the legend, tooltip and screen-reader table.
`color`	`ChartColor`	Token color; defaults to a color by series position.

Type `ChartColor`

Token color of a chart series.

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