About this block

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.

When to use

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

• Kpi cards row

After

• Data table
• Reports

What you can display

One strong use is the seats by plan shift across quarters. Other slope reads:

• Survey movement. Sentiment score per segment before and after a change, standout swing in ink.
• Rank change. Product or team standing between two periods to surface who climbed most.
• Region comparison. A single metric across markets at two dates with the leader highlighted.

Tip: share one scale across both axes so the slope angle honestly reflects the size of each change.