caliper uidocs
DemoSign inGet Pro

Histogram

Free

The shape of a distribution. Choosing coarser or finer bins retargets the same bars, and the median and p95 markers slide to their values.

Installs components/ui/histogram.tsxDepends on d3-shapeMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/histogram.json
Checkout API latency, last hour

Checkout API latency, last hour
RangeCount
40–73 ms2
73–105 ms6
105–138 ms49
138–170 ms143
170–203 ms176
203–235 ms102
235–268 ms34
268–301 ms3
301–333 ms4
333–366 ms11
366–398 ms20
398–431 ms16
431–463 ms15
463–496 ms10
496–528 ms8
528–561 ms1

When to use #

Use it for

  • Response times, order values, session lengths.
  • Checking whether a mean hides two groups.

Skip it when

  • A few categories; use the bar chart.
  • Comparing several distributions; use the box plot.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/histogram.json

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above. It is built from binValues and Histogram.

example.tsx
import { Histogram } from "@/components/ui/histogram"

const latencies = Array.from({ length: 600 }, (_, i) => {
  const a = Math.sin(i * 12.9898) * 43758.5453;
  const u = a - Math.floor(a);
  const b = Math.sin(i * 78.233) * 12345.678;
  const v = b - Math.floor(b);
  const normal = Math.sqrt(-2 * Math.log(u || 0.5)) * Math.cos(2 * Math.PI * v);
  return Math.max(40, Math.round((i % 7 === 0 ? 420 : 180) + normal * (i % 7 === 0 ? 60 : 38)));
});

export function HistogramDemo() {
  return <Histogram label="Checkout API latency, last hour" values={latencies} unit=" ms" formatValue={(v) => `${Math.round(v)}`} className="w-full" />;
}

API reference #

binValues

component

No props of its own; it accepts the native props of its root element.

Histogram

component
PropTypeDefaultDescription
label *string—
values *readonly number[]—
binsreadonly number[][8, 16, 32]Bin counts people can choose between.
defaultBinsnumber—
minnumber—
maxnumber—
unitstring""
formatValue((value: number) => string)numberText
markersbooleantrueShow median and p95 markers.
heightnumber240
loadingboolean—
errorstring—
classNamestring—

Accessibility #

It exposes group and status semantics, with aria-label, aria-busy and aria-hidden kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.