Components / Display & Media / Line Chart

Line Chart beta

One series over time, drawn in — the shape of a trend, with the area under it kept quiet.

Preview

Active users Thousands, monthly

JanMarMayJulSepNov

<figure class="k-line-chart" role="img" aria-label="Monthly active users grew from 22 to 71 thousand across the year" style="max-width:430px">
  <figcaption>Active users <span>Thousands, monthly</span></figcaption>
  <svg viewBox="0 0 560 190" aria-hidden="true">
    <line x1="0" y1="30" x2="560" y2="30" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="79" x2="560" y2="79" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="128" x2="560" y2="128" style="stroke:var(--k-line)" stroke-width="1"/><line x1="0" y1="178" x2="560" y2="178" style="stroke:var(--k-line)" stroke-width="1"/>
    <path d="M0.0,143.2 L50.9,130.6 L101.8,136.9 L152.7,118.0 L203.6,124.3 L254.5,103.7 L305.5,111.6 L356.4,91.1 L407.3,99.0 L458.2,78.5 L509.1,86.4 L560.0,65.8 L560,186 L0,186 Z" style="fill:color-mix(in srgb,var(--k-accent) 13%,transparent)"/>
    <path class="line" pathLength="1" d="M0.0,143.2 L50.9,130.6 L101.8,136.9 L152.7,118.0 L203.6,124.3 L254.5,103.7 L305.5,111.6 L356.4,91.1 L407.3,99.0 L458.2,78.5 L509.1,86.4 L560.0,65.8"/>
    <circle cx="560.0" cy="65.8" r="5.5" style="fill:var(--k-core);stroke:var(--k-bg)" stroke-width="2"/>
  </svg>
  <div class="x"><span>Jan</span><span>Mar</span><span>May</span><span>Jul</span><span>Sep</span><span>Nov</span></div>
</figure>

.k-line-chart{font-family:var(--k-font);text-align:left;margin:0}
.k-line-chart figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:12px}
.k-line-chart figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-line-chart svg{width:100%;height:auto;display:block}
.k-line-chart .line{stroke:var(--k-accent);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:k-draw 1.5s var(--k-ease) .1s forwards}
.k-line-chart .x{display:flex;justify-content:space-between;font-size:11px;color:var(--k-ink-3);margin-top:8px;padding:0 1px}
@keyframes k-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.k-line-chart .line{animation:none;stroke-dashoffset:0}}

Usage

For a single metric over time. One line, honestly scaled from zero when the values are counts; the end point is marked with the core because the present is the point.

Accessibility

A chart is a picture of numbers: give the figure role="img" and an aria-label that states the conclusion ("Signups rose from 22 to 71 over the year"), and keep the data available as a table nearby.

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

Kbd

List