Slope Comparison Chart
A card panel joining average active seats per plan across two quarters with slope lines between paired axes, the biggest mover drawn in full ink.
A card panel joining average active seats per plan across two quarters with slope lines between paired axes, the biggest mover drawn in full ink.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Slope Comparison Chart pairs average monthly active seats per plan across two quarters, four plans from Starter to Enterprise plotted on a Q1 axis and a Q2 axis and joined by slope lines. The biggest mover, Growth at +27%, is drawn in full ink while the rest sit muted, so the standout swing reads first and the header callout names it.
The block is inline SVG and CSS positioning from a fixed data array, no chart library. Each seat count maps to a vertical percentage against a shared minimum and maximum, so both axes share one scale and the line angles stay honest. Swapping in your own plans and per-quarter values is a single array update.
Reach for this block on a growth or revenue review page where the team needs to compare two points in time across a set of segments. Wire the rows to your analytics backend querying the same metric for each period, and flag the highlight on whichever segment moved most.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the seats by plan shift across quarters. Other slope reads:
Tip: share one scale across both axes so the slope angle honestly reflects the size of each change.