Components / Display & Media / Bar Chart
Bar Chart beta
Columns for comparing a handful of values — the chart people read correctly at a glance.
<figure class="k-chart" role="img" aria-label="Weekly signups rose over eight weeks, peaking at 100 in week 8" style="max-width:430px"> <figcaption>Weekly signups <span>Last 8 weeks</span></figcaption> <div class="k-bars"><div class="k-bar"><span class="v">42</span><i style="height:42%"></i></div><div class="k-bar"><span class="v">68</span><i style="height:68%"></i></div><div class="k-bar"><span class="v">54</span><i style="height:54%"></i></div><div class="k-bar"><span class="v">81</span><i style="height:81%"></i></div><div class="k-bar"><span class="v">63</span><i style="height:63%"></i></div><div class="k-bar"><span class="v">92</span><i style="height:92%"></i></div><div class="k-bar"><span class="v">74</span><i style="height:74%"></i></div><div class="k-bar hot"><span class="v">100</span><i style="height:100%"></i></div></div> <div class="k-bar-l"><span>W1</span><span>W2</span><span>W3</span><span>W4</span><span>W5</span><span>W6</span><span>W7</span><span>W8</span></div> </figure>
.k-chart{font-family:var(--k-font);text-align:left;margin:0}
.k-chart figcaption{display:flex;align-items:baseline;justify-content:space-between;font-size:13px;font-weight:600;color:var(--k-ink);margin-bottom:14px}
.k-chart figcaption span{font-size:12px;font-weight:500;color:var(--k-ink-3)}
.k-bars{display:flex;gap:10px;align-items:flex-end;height:168px;border-bottom:2px solid var(--k-line);padding:0 2px}
.k-bar{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.k-bar i{display:block;width:100%;max-width:36px;background:var(--k-accent);border-radius:5px 5px 0 0;transform-origin:bottom;animation:k-rise .8s var(--k-ease) both}
.k-bar.hot i{background:var(--k-ink)}
.k-bar .v{font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3)}
.k-bar.hot .v{color:var(--k-ink);font-weight:600}
.k-bar-l{display:flex;gap:10px;padding:8px 2px 0}
.k-bar-l span{flex:1;text-align:center;font-size:11px;color:var(--k-ink-3)}
@keyframes k-rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.k-bar i{animation:none}}
Usage
For comparing categories: weeks, plans, channels. Keep it under a dozen bars, label every value, and highlight at most one bar — the one the reader should remember.
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.
Avatar beta
Initials first, photo when there is one. Three sizes, a status dot, and a stacking group.
Card beta
The universal container: a hairline box with a header, a body and a footer that agree with each other.
Carousel beta
A row of panels that scrolls like it means it — snap points, real buttons, no autoplay.