For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- Rank shifts between 2 orderings of the same items, with each line weighted by the item's volume
- An SRE wallboard that ranks services by traffic against the days of error budget each has left
- A growth review that ranks acquisition channels by signups against the share of users each keeps
When not to use
- Exact values for several series traced across many dates on a shared time axis: use the Line Chart blocks
- Volumes that merge and split as they flow from sources into costs, stages or outcomes: use the Sankey Chart blocks
- One value per item at a single moment, compared by length with no change in rank: use the Bar Chart blocks
Agent notes
Charttakes no props and fetches nothing, so every item, rank and value derives from constants in the block's data.ts- Each item is a Recharts
LinewhosedataKeyis its id and whose values are row indexes, bent into an S-curve by a customshape - Export CSV and the copy action confirm with sonner
toast, so the app needs a mounted Toaster for either message to show
Third-party API docs
- Recharts v3: API reference, docs, used by 2 of 2 blocks
- Motion v12: API reference, docs, used by 2 of 2 blocks (the docs follow the latest Motion, with no React API break since v12)
- Sonner v2: API reference, docs, used by 2 of 2 blocks
Markdown
https://reui.io/blocks/chart/slope-chart.mdMCP
search({ query: "slope chart", type: "block", category: "slope-chart" })Shadcn Slope Charts That Show Who Moved and How Far
Some questions are about order rather than values: which busy service runs out of error budget first, or whether the biggest signup channel keeps its users. A slope chart answers them by ranking the same items 2 ways and joining each item's 2 positions with a line, so the steep lines and the crossings carry the story.
These blocks draw with the shadcn Chart wrapper over Recharts inside a ReUI Frame, with a ReUI Badge in the header, a ToggleGroup for current or baseline burn, a Slider that drives the day ruler and a DropdownMenu for CSV export and copy. Each line is as thick as its item's traffic or signups and glides to its new row when the order changes.
All Slope Chart Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Error Budget Runway Live error budget runway slope chart with traffic weighted lines and a current or baseline switch
- Retention Crossover Channel retention slope chart with a day ruler re-ranking channels from signups to Day N retention
What These Slope Chart Blocks Cover
- Error budget runway 14 services ranked by traffic slope to their days of error budget left and re-sort live as current burn drifts, with a Current or Baseline switch and 4 fleet stats.
- Retention crossover 11 acquisition channels ranked by signups slope to their rank by share of users kept, scrubbed from Day 1 to 90 on a day ruler or played as a tour.
- Traced lines and overtakes Hover traces a line and a click pins it while the rest dim, and the retention block rings each point where the traced line passes or is passed.
- Inspector footers and export A footer reads out the traced item, and a header menu exports a CSV and copies a summary or insight, each confirmed by a toast.
Related Shadcn Chart Categories
- Area Chart Area chart cards with gradient fills, comparisons to a prior period or baseline, hover readouts and CSV export for trends over time.
- Bar Chart Bar and column charts, stacked hourly outcomes, 3D prisms, diverging lanes and lollipop stems for comparing values.
- Composed Chart Composed charts that layer areas and lines on one axis, with reference lines, goals and release markers.
- Line Chart Line chart cards with single and multi-series lines, dual axes, reference lines and metric switchers.
- Pie Chart Pie and donut chart cards with center totals, per-segment legends and period tabs for share of a whole.
- Radial Chart Radial gauges with semicircle and full arcs, segmented rings and status labels for progress toward a target.
- Sankey Chart Sankey flow charts for income statements, trial journeys and sales funnels, with hover tracing, drop-off nodes and leak markers.
- Sparkline KPI tiles and metric lists where each value pairs with a small line, area or bar sparkline and a delta.
- Status Tracker Per-row status trackers for run history, deploy stages and pipelines, with hover details and filters.
- Stats Number-first KPI strips for when the metric leads and a trend line would only be decoration.
- Dashboard Full overview screens that combine a metric row, a chart layer and a data grid into one page.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (43) Browse 43 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (51) Browse 51 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use a slope chart instead of a line chart?
Use a slope chart when the question is who moved and how far between 2 rankings, such as traffic order against runway order. Use a line chart when exact values across many dates matter, since a slope chart shows only its 2 columns.
Why are some lines thicker than others?
Line weight follows each item's volume, requests per day in the error budget runway and signups in the retention crossover, so a big service or channel that drops down the order stands out.
Can the slope charts run on live data?
Yes. Each block reads its services or channels from constants in its own folder and the chart component takes no props, so swap those for your own records. The error budget runway already updates on a 5 second tick from a simulated burn drift, so replace that drift with real burn rates.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.