Threshold what-if chart
What a new alert threshold would have done.
Definition · Updated Nov 2, 2026
A threshold what-if chart replays a measure against the current alert threshold and a proposed one, and counts the alerts each would have fired. You see the trade-off before you change the rule. Use it for alert tuning and SLO reviews.
Pay once. Every update included.
Live preview
Sample data: hourly success rate, Oct 10 to today, 14 alerts at 96%, 3 at a proposed 95%
- Data shape
- A measure over time, two thresholds
- Good for
- Alert tuning, SLO reviews
- Avoid when
- There is only one threshold
- Sizes
- XS, S, M and L, re-laid out from the data
Anatomy
Inspect it like the Figma file.
The same layers, names and tokens as the component. Select one to read its size, fill and style.
Layers
111 / Threshold what-if
- Layer
- success
- Type
- Vector
- Size
- 614 × 140
- Stroke
- data/cat-2
- Group
- Marks · 23
Layers
111 / Threshold what-if
- Layer
- success
- Type
- Vector
- Size
- 294 × 79
- Stroke
- data/cat-2
- Group
- Marks · 23
Layers
111 / Threshold what-if
- Layer
- success
- Type
- Vector
- Size
- 133 × 45
- Stroke
- data/cat-2
- Group
- Marks · 23
Sizes
Re-laid out, never scaled.
The same data at XS, S, M and L. Every size is redrawn from the data, so text and line weights never shrink.
M against S
Width360 px480 px
Plot328 px440 px
Labels1212
Marks2323
Height212 px246 px
Same tokens at every size: text styles, 1 px lines and mark radius stay put.
When to use
Before you change the rule.
Three signs it fits, and three signs another type fits better.
Are two thresholds compared?
One target to hold.
Yes: Keep the threshold what-if
Is the alert count the point?
The full range of thresholds.
Yes: Keep the threshold what-if
Code and Figma
One name in Figma and in code.
Every Figma property is a prop with the same name and values. One command installs it.
Figma
chart/111-threshold-what-if
npx shadcn add @chartory/threshold-what-ifimport { ThresholdWhatIf } from "@/components/chartory/threshold-what-if"import { hourlySuccess } from "./hourly-success"export function HourlySuccess() { return ( <ThresholdWhatIf data={hourlySuccess} size="m" legend={true} /> )}Hearth widget
Threshold what-if as a widget.
The chart in a Hearth card with a hero number and two blocks. One token set, light and dark.
EmberPreset
ChartoryDefault preset
Pick the blocks, the size and the preset for your own widget.
Read the Hearth widget docsFAQ
Threshold what-if questions.
What people ask before they put a threshold what-if in a dashboard.
Something else?
hello@usechartory.comHours below a threshold raise alerts, at most one every three hours, the same way for both lines. Both counts sit at the top (NOW 14, PROPOSED 3). Each rule's alerts are ticks in its own lane; crossings of the proposed line are also dots.
Not on this chart; it is built for now against proposed. To scan a whole range of thresholds, use the threshold sweep.
One data object in the sample’s shape: a measure over time, two thresholds. The docs page lists every field and links its JSON Schema; the sample data comes with the component, so you can start from it and swap in your own.
Series take the preset’s data colours in order, and states such as up, down or warning take its status colours. Change the preset in Figma or in code to recolour every chart at once.
XS, S, M and L, in light and dark. Each size is laid out again from the data, so text and lines keep their size.
Yes. It plays in when it scrolls into view, and when the data changes every mark moves from its old place to its new one. With reduced motion on, it does not move.
Yes. The Figma component comes with Figma and Complete, the React component with Code and Complete.
Ask for it by name. The MCP server tells the agent what data it needs and runs the same command: npx shadcn add @chartory/threshold-what-if. You review the diff.
Related types
Other ways to show change over time.
The same question, a different shape of answer. Every type ships in Figma and in code.
Same family
Change over time
Trends, levels and seasons across days, months or years.