Histogram

A distribution of raw samples binned on nice edges, with p50 / p95 / p99 pinned onto the plot — the chart that shows the tail your average hides.

Latency with p50 / p95 / p99

@spectrumui/histogram-chart

API latency

900 samples · 22 bins

p50 29ms · p95 72ms · p99 109ms

API latency — sample count by bin
RangeCountShare
0ms – 10ms212.3%
10ms – 20ms20122.3%
20ms – 30ms24126.8%
30ms – 40ms18120.1%
40ms – 50ms11112.3%
50ms – 60ms576.3%
60ms – 70ms323.6%
70ms – 80ms262.9%
80ms – 90ms121.3%
90ms – 100ms30.3%
100ms – 110ms60.7%
110ms – 120ms10.1%
120ms – 130ms20.2%
130ms – 140ms20.2%
140ms – 150ms00.0%
150ms – 160ms30.3%
160ms – 170ms00.0%
170ms – 180ms00.0%
180ms – 190ms00.0%
190ms – 200ms00.0%
200ms – 210ms00.0%
210ms – 220ms10.1%

Order values

Order value

700 samples · 38 bins

p50 $57 · p95 $116

Order value — sample count by bin
RangeCountShare
$10 – $1510.1%
$15 – $2071.0%
$20 – $25121.7%
$25 – $30284.0%
$30 – $35497.0%
$35 – $40588.3%
$40 – $45699.9%
$45 – $50517.3%
$50 – $55618.7%
$55 – $60456.4%
$60 – $65395.6%
$65 – $70395.6%
$70 – $75375.3%
$75 – $80273.9%
$80 – $85344.9%
$85 – $90253.6%
$90 – $95233.3%
$95 – $100202.9%
$100 – $105182.6%
$105 – $110111.6%
$110 – $11581.1%
$115 – $12081.1%
$120 – $12571.0%
$125 – $13020.3%
$130 – $13540.6%
$135 – $14000.0%
$140 – $14571.0%
$145 – $15020.3%
$150 – $15520.3%
$155 – $16000.0%
$160 – $16520.3%
$165 – $17010.1%
$170 – $17500.0%
$175 – $18000.0%
$180 – $18510.1%
$185 – $19000.0%
$190 – $19510.1%
$195 – $20010.1%

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

  • chart-engine.tsxcomponents/spectrumui/charts/chart-engine.tsx
  • histogram-chart.tsxcomponents/spectrumui/charts/histogram-chart.tsx

There is nothing to install — this chart draws its own SVG and imports only @/lib/utils.

Usage

import { HistogramChart } from '@/components/spectrumui/charts/histogram-chart';

<HistogramChart data={samples} label="API latency" />
  • Pass raw samples — the chart bins them itself on human-readable edges.
  • buildBins() and percentile() are exported if you need the numbers elsewhere.

Props

PropTypeDefaultDescription
datanumber[]LATENCY_MSRaw samples. The chart bins them itself.
labelstring'API latency'Header title.
format(value: number) => string-Formats bin edges, percentile pins and the hover readout.
percentilesnumber[][50, 95, 99]Which percentiles to pin onto the plot.
binsnumber26Target bin count. The real count lands on a nice step near it.
heightnumber-Plot height in pixels. The header sits above it, so the card is taller than this.
status'ready' | 'loading' | 'empty' | 'error''ready'Which state to render. All four reserve the same frame height, so nothing shifts when data lands.
onRetry() => void-Called by the retry button in the error state. Omit it and no button is shown.
classNamestring-Merged onto the root element.