BarChart

PreviewSVGPublishes selection

Compares values across categories or dates. Rows that share an x value are summed, so raw rows work without grouping them first.

Revenue by region

Sep 7 – Oct 6, 2026 · paid and pending orders

Revenue by region
Region	Paid social	Organic search	Email	Direct
North America	$47.7K	$51.6K	$37.8K	$22.9K
Europe	$33.4K	$31.6K	$25.5K	$13.6K
Asia Pacific	$20.7K	$20.7K	$16.2K	$11.1K
Latin America	$10.8K	$10.4K	$6.2K	$4.5K
Middle East & Africa	$4.6K	$5.5K	$5.6K	$3.3K

orientation

sort

groupstackselect

<BarChart
  data={orders}
  x="region"
  y="amount"
  group="channel"
  select
  format="currency-compact"
/>

Installation

BarChart is exported from @quartile/react, alongside every other chart and component.

git clone https://github.com/zinnoberHaus/quartile

Not on npm yet: build the package from the clone as described in Installation. The preview API may change before publication.

Usage

Pass rows and name the fields. Types, formats and axis labels come from the data's schema; see Data model.

import { BarChart } from '@quartile/react';

// orders: { region: 'Europe', channel: 'Email', amount: 128.5 }, …
type Order = { region: string; channel: string; amount: number };

export function RevenueByRegion({ orders }: { orders: Order[] }) {
  return <BarChart data={orders} x="region" y="amount" group="channel" sort="desc" select />;
}

With select, clicking a bar (or Enter on the focused bar) toggles its x value in the nearest <Selection>, and onSelect receives the new predicate. See Linked selections.

Props

PropTypeDefaultDescription

datarequiredDataInput<R>—Rows to plot, or a dataset with a schema attached.

xrequiredkeyof R & string—Category or date field, one bar (or group of bars) per value.

yrequired(keyof R & string) | (keyof R & string)[]—One or more measures. Rows that share an x (and group) are summed.

groupkeyof R & string—Splits each bar into one bar per value of this field (grouped, or stacked with stack).

colorkeyof R & string—Alias of group, matching the other charts.

stackbooleanfalseStacks groups into one bar per x instead of placing them side by side.

orientation'vertical' | 'horizontal''vertical'Vertical columns (default) or horizontal bars with direct value labels.

sort'desc' | 'asc' | 'none'SortOrder'none'Orders categories by total value. Dates and numbers always keep their natural order.

selectbooleanfalseClicking a bar (or Enter on the focused bar) toggles its x value in the nearest Selection.

formatFormatter—Formats the value axis, labels and tooltip. Defaults to the field's schema format.

xFormatFormatter—Formats the category labels. Defaults to the field's schema format.

colorsstring[] | Record<string, string>—Series colors, by index or by group value. Defaults to the categorical palette in order.

legendboolean—Shows a legend under the plot that doubles as a group filter. Defaults to true for 2+ groups.

idstring—Publisher id for the selection. Defaults to a generated id.

selectionstring | false—Selection to read from and publish to. Defaults to the nearest; false opts out.

onSelect(predicate: Predicate | null) => void—Called after a click or keyboard toggle with the new predicate for x (or null).

Frame and state props shared with the charts (11) · ChartBaseProps, ChartStateProps

PropTypeDefaultDescription

heightnumber240Plot height in px. Width always fills the container.

classNamestring——

styleCSSProperties——

aria-labelstring—Accessible name. A summary of the data is generated and rendered as hidden text inside the figure.

view'chart' | 'table'—table renders the same data as a table, with the same formats, at the chart's size. Large lazy tables expose a data-view control rather than mounting every hidden row.

tooltipNotestring—Plain-text context shown with tooltips and included in the accessible chart description.

loadingboolean | string—Shows the loading state at the chart's size, so the layout never jumps.

errorboolean | string | Error | null—Shows the error state. A string or Error becomes the message.

errorCodestring—Shown in the error state; copyable for support.

onRetry() => void——

empty{ title?: string; description?: string; action?: ReactNode }—Title and description for the empty state. Shown when there are no rows.

Accessibility

Keyboard

Tab into the plot, ← → between bars, Home and End to jump. With select, Enter or Space toggles the focused bar. Escape clears the cursor.

Screen readers

A summary names the bar count, the groups, and the highest and lowest bars with their values. The focused bar is announced as you move.

Table fallback

Screen readers always get a table of the plotted values with the same formats. view="table" shows it at the chart's size.

Report an issueBuilt Oct 21, 2026