Components / Display & Media / Scatter Chart

Scatter Chart beta

Two measures, one cloud of dots — the chart that shows whether they move together.

Preview

Last 12 weeksOrganicPaid social

<figure class="k-scatter" role="img" aria-label="Scatter chart: ad spend and signups rise together; the paid social series (accent) sits higher at every spend level." style="margin:0;max-width:340px;width:100%">
  <svg viewBox="0 0 320 170" width="100%" role="presentation">
    <line x1="30" y1="12" x2="30" y2="146" stroke="var(--k-line)"/>
    <line x1="30" y1="146" x2="308" y2="146" stroke="var(--k-line)"/>
    <line x1="30" y1="79" x2="308" y2="79" stroke="var(--k-line)" stroke-dasharray="3 4"/>
    <circle cx="38" cy="128" r="4.5" fill="var(--k-ink-3)"/><circle cx="62" cy="118" r="4.5" fill="var(--k-ink-3)"/><circle cx="84" cy="124" r="4.5" fill="var(--k-ink-3)"/><circle cx="104" cy="102" r="4.5" fill="var(--k-ink-3)"/><circle cx="126" cy="108" r="4.5" fill="var(--k-ink-3)"/><circle cx="148" cy="88" r="4.5" fill="var(--k-ink-3)"/><circle cx="168" cy="96" r="4.5" fill="var(--k-ink-3)"/><circle cx="188" cy="74" r="4.5" fill="var(--k-ink-3)"/><circle cx="210" cy="80" r="4.5" fill="var(--k-ink-3)"/><circle cx="232" cy="58" r="4.5" fill="var(--k-ink-3)"/><circle cx="254" cy="64" r="4.5" fill="var(--k-ink-3)"/><circle cx="276" cy="40" r="4.5" fill="var(--k-ink-3)"/><circle cx="52" cy="84" r="4.5" fill="var(--k-accent)"/><circle cx="96" cy="66" r="4.5" fill="var(--k-accent)"/><circle cx="140" cy="52" r="4.5" fill="var(--k-accent)"/><circle cx="196" cy="44" r="4.5" fill="var(--k-accent)"/><circle cx="244" cy="30" r="4.5" fill="var(--k-accent)"/><circle cx="286" cy="22" r="4.5" fill="var(--k-accent)"/>
    <text x="30" y="162" font-size="9.5" fill="var(--k-ink-3)">Ad spend →</text>
    <text x="308" y="162" font-size="9.5" fill="var(--k-ink-3)" text-anchor="end">Signups ↑</text>
  </svg>
  <figcaption><span class="cap">Last 12 weeks</span><span class="lg"><span><i style="background:var(--k-ink-3)"></i>Organic</span><span><i style="background:var(--k-accent)"></i>Paid social</span></span></figcaption>
</figure>

.k-scatter{font-family:var(--k-font);text-align:left;color:var(--k-ink)}
.k-scatter figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:9px}
.k-scatter .cap{font-size:12px;color:var(--k-ink-3)}
.k-scatter .lg{display:flex;gap:14px;font-size:11.5px;color:var(--k-ink-2)}
.k-scatter .lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}

Usage

For correlation questions: spend vs. return, price vs. rating. If the reader only needs one measure over time, that is a Line Chart; this is for two measures at once.

Accessibility

The figure carries the conclusion in its label ("spend and signups rise together"), because a dot cloud cannot be read point by point by ear.

Related parts

Aspect Ratio beta

A box that holds its shape — 16/9 for video, 4/3 for photos, 1/1 for avatars — whatever fills it.

ratiomediaresponsive

Avatar beta

Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.

userprofileinitials

Bar Chart beta

Columns for comparing a handful of values — the chart people read correctly at a glance.

chartcolumnscomparison

Card beta

The universal container: a hairline box with a header, a body and a footer that agree with each other.

containerpanel

Radar Chart

Sparkline