Dumbbell Latency Chart
Dumbbell rows comparing p95 latency per endpoint before and after a release, with connector bars, paired dots, and an axis row.
Dumbbell rows comparing p95 latency per endpoint before and after a release, with connector bars, paired dots, and an axis row.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Dumbbell Latency Chart compares p95 latency per endpoint before and after a release, five rows from POST /v1/checkout (480 to 210 ms) to GET /v1/account (130 to 95 ms). Each row is a track with two dots joined by a connector bar: a muted dot for the before value and a solid dot for the after, so the size and direction of every improvement reads at a glance. The header callout names the median change, 39% faster.
The block is pure CSS positioning from a fixed data array, no chart library. Each millisecond value maps to a percent position on the track against a 700 ms maximum, and the connector spans the gap between the two dots. Swapping in your before-and-after numbers is a single array update.
Reach for this block on a performance or release review page where the team needs to show the effect of an optimization per endpoint. Wire the rows to your metrics backend querying p95 over matched windows on each side of the change, and set the maximum to your slowest expected value.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the before-and-after latency comparison across endpoints. Other dumbbell reads:
Tip: keep the before dot muted and the after dot solid so direction reads without a legend lookup.