Histogram

PreviewSVGPublishes selection

Shows how a quantitative field is distributed in equal-width bins, or counts per day, week or month for a date field.

Session length

1,600 sessions

Session length
Session length	Count
0 min – 0.5 min	2
0.5 min – 0.9 min	10
0.9 min – 1.4 min	13
1.4 min – 1.8 min	31
1.8 min – 2.3 min	51
2.3 min – 2.8 min	106
2.8 min – 3.2 min	130
3.2 min – 3.7 min	152
3.7 min – 4.1 min	177
4.1 min – 4.6 min	181
4.6 min – 5 min	182
5 min – 5.5 min	154
5.5 min – 6 min	129
6 min – 6.4 min	81
6.4 min – 6.9 min	75
6.9 min – 7.3 min	43
7.3 min – 7.8 min	29
7.8 min – 8.3 min	20
8.3 min – 8.7 min	13
8.7 min – 9.2 min	13
9.2 min – 9.6 min	4
9.6 min – 10.1 min	3
10.1 min – 10.5 min	0
10.5 min – 11 min	1

bins

medianbrush

<Histogram
  data={sessions}
  x="minutes"
  median
  brush
/>

Installation

Histogram 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

A quantitative x is binned into bins equal-width bins. A date x is bucketed by interval (day, week or month). Pass value to sum a field instead of counting rows.

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

// sessions: { minutes: 3.4 }, …
type Session = { minutes: number };

export function SessionLength({ sessions }: { sessions: Session[] }) {
  return <Histogram data={sessions} x="minutes" bins={24} median brush />;
}

// orders: { date: '2026-10-06', amount: 128.5 }, …
type Order = { date: string; amount: number };

export function OrdersPerWeek({ orders }: { orders: Order[] }) {
  return <Histogram data={orders} x="date" interval="week" brush />;
}

With brush, dragging across bins publishes a between range on x; clicking clears it. This works for quantitative and date fields. See Linked selections.

Props

PropTypeDefaultDescription

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

xrequiredkeyof R & string—Quantitative field to bin, or a date field for counts per day, week or month.

binsnumber24Number of equal-width bins over the niced range of a quantitative x.

interval'day' | 'week' | 'month'TimeInterval'day'Local-calendar bucket for a date x; display timeZone does not rebucket the data.

valuekeyof R & string—Sums this field per bin instead of counting rows.

formatFormatter—Formats x: bin edges, the axis and the median. Defaults to the field's schema format.

valueFormatFormatter—Formats counts (or sums of value).

countLabelstring'Count'Label for counts in the tooltip when value is not set.

brushbooleanfalseDrag across bins to publish a between range on x; click to clear.

medianbooleanfalseMarks the median of x with a labelled rule. Quantitative x only.

colorstring—Bar fill. Defaults to the soft signal tint.

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 when the brush changes.

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

PropTypeDefaultDescription

heightnumber180Plot 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, arrow keys between bins, Home and End to jump. With brush, Enter selects the focused bin (again to clear) and Shift+Enter extends the range.

Screen readers

A summary gives the range, the total and the highest bin. The focused bin is announced with its count.

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