Burn rate in four windows, against the paging rules. Sample data: burn rate 6.2× in the last hour against a page at 14.4×, 0.73× this month.
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 Burn-rate tracks component to your project.
npx shadcn add @chartory/burn-rate-tracks - 3
Use it
Pass your rows. The props are the Figma properties.
usage.tsximport { BurnRateTracks } from "@/components/chartory/burn-rate-tracks"<BurnRateTracks data={burnRates} size="m" legend/>
Props
<BurnRateTracks>
Every prop but data is a Figma property with the same name and values.
BurnRateTracksData
The data prop: one object for the whole chart.
BurnRateTracksRow
One object per entry in rows.
The data as a JSON Schema: schemas/burn-rate-tracks.json
Burn-rate tracks: a React and Figma chart in four sizes
What does a burn-rate tracks show?
Burn-rate tracks show how fast an error budget is being spent over several windows at once, with the alert rule marked on the windows that have one. A short window catches spikes, a long one catches slow leaks. Use it for SLO alerting and on-call 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 Burn-rate tracks component?
It is one <BurnRateTracks> component. Its props are the Figma properties with the same names and values, and the props table above lists them. The data is a burn rate and a rule per window.
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 several windows compared? Yes means the burn-rate tracks fit.
- Does each window have a rule? Yes means the burn-rate tracks fit.
- Is it the rate now? Yes means the burn-rate tracks fit.
When does another type fit better?
- One budget over the month. Use Burn-down instead.
- Plain rates side by side. Use Horizontal bars instead.
- The rate over time. Use Target trend instead.
Burn-rate 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/burn-rate-tracks. The Installation guide has the steps.
Yes. Connect the Chartory MCP server and ask for the burn-rate tracks chart; the agent runs the same command and you review the diff.
A burn rate and a rule per window. 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/114-burn-rate-tracks 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.