What a new alert threshold would have done. Sample data: hourly success rate, Oct 10 to today, 14 alerts at 96%, 3 at a proposed 95%.
Installation
- 1
Set up the registry once
Your token in .env and @chartory in components.json. Skip this when another chart is already installed.
Installation guide - 2
Add the chart
One command adds the Threshold what-if component to your project.
npx shadcn add @chartory/threshold-what-if - 3
Use it
Pass your rows. The props are the Figma properties.
usage.tsximport { ThresholdWhatIf } from "@/components/chartory/threshold-what-if"<ThresholdWhatIf data={hourlySuccess} size="m" legend/>
Props
<ThresholdWhatIf>
Every prop but data is a Figma property with the same name and values.
ThresholdWhatIfData
The data prop: one object for the whole chart.
ThresholdWhatIfNow
The now object.
ThresholdWhatIfProp
The prop object.
The data as a JSON Schema: schemas/threshold-what-if.json
Threshold what-if chart: a React and Figma chart in four sizes
What does a threshold what-if chart show?
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.
Chartory ships it as a Figma component and a React component with the same name. The code installs from the shadcn registry with one command and lands in your project as a file you own.
What is the Threshold what-if component?
It is one <ThresholdWhatIf> component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is a measure over time, two thresholds.
Sizes XS, S, M and L re-lay the chart out from the data instead of scaling it, so labels stay readable at every size.
When should I use it?
- Are two thresholds compared? Yes means the threshold what-if fits.
- Is the alert count the point? Yes means the threshold what-if fits.
- Is it over time? Yes means the threshold what-if fits.
When does another type fit better?
- One target to hold. Use Target trend instead.
- The full range of thresholds. Use Threshold sweep instead.
- One value per item. Use Horizontal bars instead.
Threshold what-if questions
Installing, data, Figma and plans.
Yes. It installs through the shadcn registry with the shadcn CLI, and the file lands in your project.
Add your token and the @chartory registry once, then run npx shadcn add @chartory/threshold-what-if. The Installation guide has the steps.
Yes. Connect the Chartory MCP server and ask for the threshold what-if chart; the agent runs the same command and you review the diff.
A measure over time, two thresholds. The sample data comes with the component, and the props table lists every field.
XS, S, M and L, in Figma and in code. Each size is laid out again from the data, so text and lines keep their size.
Yes. chart/111-threshold-what-if has the same properties as the component.
Yes. Every paint is a token, so the chart follows light and dark mode and the collection you pick.
Code and Complete. Figma has the Figma file only.