Traffic vs set chart
Real traffic against the test set, cluster by cluster.
Definition · Updated Nov 2, 2026
A traffic vs set chart puts each cluster's share of production traffic next to its share of the test set. The cluster flagged as a gap is shaded, and a set share below traffic turns warning. Use it to keep a golden set in line with real use.
Pay once. Every update included.
Live preview
Sample data: eight request clusters, full refunds 31% of traffic and 38% of the set, partial + coupon 14% and 0%
- Data shape
- Two shares per cluster, an optional gap or under flag
- Good for
- Golden sets, test coverage, sampling
- Avoid when
- There is no test set to compare
- Sizes
- XS, S, M and L, re-laid out from the data
Anatomy
Inspect it like the Figma file.
The same layers, names and tokens as the component. Select one to read its size, fill and style.
Layers
119 / Traffic vs set
- Layer
- gap · partial + coupon
- Type
- Rectangle
- Size
- 760 × 32
- Fill
- status/warning-bg
- Group
- Marks · 15
Layers
119 / Traffic vs set
- Layer
- gap · partial + coupon
- Type
- Rectangle
- Size
- 440 × 22
- Fill
- status/warning-bg
- Group
- Marks · 15
Layers
119 / Traffic vs set
- Layer
- gap · partial + coupon
- Type
- Rectangle
- Size
- 279 × 18
- Fill
- status/warning-bg
- Group
- Marks · 15
Sizes
Re-laid out, never scaled.
The same data at XS, S, M and L. Every size is redrawn from the data, so text and line weights never shrink.
M against S
Width360 px480 px
Plot328 px440 px
Labels2424
Marks1515
Height212 px246 px
Same tokens at every size: text styles, 1 px lines and mark radius stay put.
When to use
Do the tests match real use?
Three signs it fits, and three signs another type fits better.
Are two shares compared per cluster?
One share per cluster.
Yes: Keep the traffic vs set
Is the share the point?
Case counts on a map of traffic.
Yes: Keep the traffic vs set
Is it a list of clusters?
Two values per item, any kind.
Yes: Keep the traffic vs set
Code and Figma
One name in Figma and in code.
Every Figma property is a prop with the same name and values. One command installs it.
Figma
chart/119-traffic-vs-set
npx shadcn add @chartory/traffic-vs-setimport { TrafficVsSet } from "@/components/chartory/traffic-vs-set"import { clusterShares } from "./cluster-shares"export function ClusterShares() { return ( <TrafficVsSet data={clusterShares} size="m" legend={true} /> )}Hearth widget
Traffic vs set as a widget.
The chart in a Hearth card with a hero number and two blocks. One token set, light and dark.
EmberPreset
ChartoryDefault preset
Pick the blocks, the size and the preset for your own widget.
Read the Hearth widget docsFAQ
Traffic vs set questions.
What people ask before they put a traffic vs set in a dashboard.
Something else?
hello@usechartory.comIt marks the cluster the data flags as a gap: partial + coupon in the sample, 14% of traffic and 0% of the set.
The legend names them: traffic, golden set and gap.
One data object in the sample’s shape: two shares per cluster, an optional gap or under flag. The docs page lists every field and links its JSON Schema; the sample data comes with the component, so you can start from it and swap in your own.
Series take the preset’s data colours in order, and states such as up, down or warning take its status colours. Change the preset in Figma or in code to recolour every chart at once.
XS, S, M and L, in light and dark. Each size is laid out again from the data, so text and lines keep their size.
Yes. It plays in when it scrolls into view, and when the data changes every mark moves from its old place to its new one. With reduced motion on, it does not move.
Yes. The Figma component comes with Figma and Complete, the React component with Code and Complete.
Ask for it by name. The MCP server tells the agent what data it needs and runs the same command: npx shadcn add @chartory/traffic-vs-set. You review the diff.
Related types
Other ways to show compare items.
The same question, a different shape of answer. Every type ships in Figma and in code.
Same family
Compare items
Rank, gap and change between products, teams or regions.