Skip to content
Get All-Access
Data & ChartsPro

Distribution Chart

Distribution chart for raw observations: histograms, box plot, violin, density, ridgeline, strip plot and error bars.

Usage

Response time

Distribution chart, 3 points from API to Edge. Median from 136 ms to 74 ms, lowest 74 ms, highest 196 ms.
Response time, data table
groupMedian
API136 ms
Web196 ms
Edge74 ms

Installation

Distribution Chart comes with WunderUI Core and Pro, in the package from your plan. See the plans.

Then import what you need:

tsx
import {
  DistributionChart,
  DistributionChartProps,
  DistributionChartVariant,
} from "@wunderui/react"

Examples

Histogram

Response time

  • API
Distribution chart, 24 points from 84 ms to 275 ms. API from 14 ms to 2 ms, lowest 1 ms, highest 41 ms.
Response time, data table
binAPI
84 ms14 ms
92 ms30 ms
101 ms34 ms
109 ms32 ms
117 ms41 ms
125 ms41 ms
134 ms40 ms
142 ms30 ms
150 ms32 ms
159 ms24 ms
167 ms22 ms
175 ms14 ms
184 ms11 ms
192 ms6 ms
200 ms7 ms
208 ms5 ms
217 ms2 ms
225 ms4 ms
233 ms1 ms
242 ms2 ms
250 ms3 ms
258 ms2 ms
266 ms1 ms
275 ms2 ms

Cumulative Histogram

Response time

  • API
Distribution chart, 24 points from 84 ms to 275 ms. API from 4% to 100%, lowest 4%, highest 100%.
Response time, data table
binAPI
84 ms4%
92 ms11%
101 ms20%
109 ms28%
117 ms38%
125 ms48%
134 ms58%
142 ms66%
150 ms74%
159 ms80%
167 ms85%
175 ms89%
184 ms91%
192 ms93%
200 ms95%
208 ms96%
217 ms96%
225 ms97%
233 ms98%
242 ms98%
250 ms99%
258 ms99%
266 ms100%
275 ms100%

Layered Histogram

Response time

Distribution chart, 24 points from 84 ms to 395 ms. API from 26 ms to 0 ms, lowest 0 ms, highest 64 ms; Web from 0 ms to 3 ms, lowest 0 ms, highest 52 ms.
Response time, data table
binAPIWeb
84 ms26 ms0 ms
98 ms56 ms0 ms
111 ms64 ms0 ms
125 ms60 ms14 ms
138 ms60 ms27 ms
152 ms44 ms42 ms
165 ms38 ms46 ms
179 ms17 ms52 ms
192 ms9 ms49 ms
206 ms9 ms24 ms
219 ms5 ms37 ms
233 ms2 ms22 ms
246 ms5 ms22 ms
260 ms2 ms12 ms
273 ms3 ms16 ms
287 ms0 ms7 ms
300 ms0 ms8 ms
314 ms0 ms3 ms
327 ms0 ms4 ms
341 ms0 ms1 ms
354 ms0 ms3 ms
368 ms0 ms2 ms
381 ms0 ms6 ms
395 ms0 ms3 ms

Boxplot

Response time

Distribution chart, 3 points from API to Edge. Median from 136 ms to 74 ms, lowest 74 ms, highest 196 ms.
Response time, data table
groupMedian
API136 ms
Web196 ms
Edge74 ms

Violin

Response time

Distribution chart, 3 points from API to Edge. Median from 136 ms to 74 ms, lowest 74 ms, highest 196 ms.
Response time, data table
groupMedian
API136 ms
Web196 ms
Edge74 ms

Density

Response time

Distribution chart, 24 points from 84 ms to 275 ms. API from 0.45% to 0.03%, lowest 0.03%, highest 1.14%.
Response time, data table
binAPI
84 ms0.45%
92 ms0.72%
101 ms0.93%
109 ms1.05%
117 ms1.12%
125 ms1.14%
134 ms1.10%
142 ms1.01%
150 ms0.89%
159 ms0.76%
167 ms0.62%
175 ms0.48%
184 ms0.35%
192 ms0.25%
200 ms0.19%
208 ms0.15%
217 ms0.11%
225 ms0.09%
233 ms0.07%
242 ms0.06%
250 ms0.06%
258 ms0.06%
266 ms0.05%
275 ms0.03%

Ridgeline

Response time

Distribution chart, 3 points from API to Edge. Median from 136 ms to 74 ms, lowest 74 ms, highest 196 ms.
Response time, data table
groupMedian
API136 ms
Web196 ms
Edge74 ms

Strip Plot

Response time

Distribution chart, 3 points from API to Edge. Median from 136 ms to 74 ms, lowest 74 ms, highest 196 ms.
Response time, data table
groupMedian
API136 ms
Web196 ms
Edge74 ms

Error Bars

Response time

Distribution chart, 3 points from API to Edge. Mean from 141 ms to 78 ms, lowest 78 ms, highest 210 ms.
Response time, data table
groupMean
API141 ms
Web210 ms
Edge78 ms

State – Loading

Response time

Distribution chart, 24 points from 84 ms to 275 ms. API from 14 ms to 2 ms, lowest 1 ms, highest 41 ms.

In context

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Latency Percentiles

Histogram of API latency with p50 / p95 markers and the percentiles.

API latency

Distribution chart, 24 points from 84 ms to 275 ms. API from 14 ms to 2 ms, lowest 1 ms, highest 41 ms.
API latency, data table
binAPI
84 ms14 ms
92 ms30 ms
101 ms34 ms
109 ms32 ms
117 ms41 ms
125 ms41 ms
134 ms40 ms
142 ms30 ms
150 ms32 ms
159 ms24 ms
167 ms22 ms
175 ms14 ms
184 ms11 ms
192 ms6 ms
200 ms7 ms
208 ms5 ms
217 ms2 ms
225 ms4 ms
233 ms1 ms
242 ms2 ms
250 ms3 ms
258 ms2 ms
266 ms1 ms
275 ms2 ms

Percentiles

  • p50
    136 ms
  • p90
    186 ms
  • p95
    211 ms
  • p99
    260 ms

API Reference

PropTypeDefault
variant"histogram" | "cumulative-histogram" | "layered-histogram" | "boxplot" | "violin" | "density" | "ridgeline" | "strip-plot" | "error-bars""histogram"
groups{ label, values, color? }[]—
binsnumber24
markers{ value, label }[]—
state"ready" | "loading" | "empty" | "error""ready"
hiddenSeries · animate · animationKeystring[] · boolean · string | number—
activeIndexnumber | null—
animateboolean—
animationKeystring | number—
axisFormatterChartValueFormatter—
categoryAxisboolean—
categoryFormatter(label: string) => string—
categoryTicksreadonly string[]—
classNamestring—
defaultActiveIndexnumber | null—
defaultSelectedRangeChartRange | null—
descriptionstring—
emptyDescriptionstring—
emptyTitlestring—
errorDescriptionstring—
errorTitlestring—
gridboolean—
gridIntervalsnumber—
gridStyle"solid" | "dashed"—
heightnumber—
hiddenSeriesreadonly string[]—
includeZeroboolean—
labelstring—
onActiveIndexChange(index: number | null) => void—
onRetry() => void—
onSelectedRangeChange(range: ChartRange | null) => void—
rangeSelectableboolean—
selectedRangeChartRange | null—
tooltipboolean—
tooltipTitle(datum: ChartDatum, index: number) => React.ReactNode—
valueAxisboolean—
valueAxisSide"left" | "right"—
valueDomainreadonly [number, number]—
valueFormatterChartValueFormatter—
valueTicksreadonly number[]—
widthnumber—

Theming

The CSS variables this component reads. Set one on any wrapper to restyle everything inside it. More in Theming.

VariableUsed forDefault
Color
Stroke#FFFFFFdark #1C1D20
Fill, stroke#000000dark #FFFFFF
Fill, stroke#6E6E70dark #A2A3A3
Motion
Duration250ms
Easingcubic-bezier(0.22, 1, 0.36, 1)
PreviousData TableNextFilter Menu