Vertical bar chart.
Base
<figure class="column-chart-demo column-chart-demo--count-5" style="--accent:#E8A020;">
<figcaption class="column-chart-demo__title">Weekly sales</figcaption>
<div class="column-chart-demo__chart" role="img" aria-label="Column chart of weekly sales, base orders per week with returns stacked on top when enabled">
<div class="column-chart-demo__col">
<span class="column-chart-demo__value">40<span class="column-chart-demo__value-extra">+15</span></span>
<div class="column-chart-demo__track">
<div class="column-chart-demo__seg column-chart-demo__seg--base" style="height:40%;"></div>
</div>
<span class="column-chart-demo__label">Wk1</span>
</div>
<div class="column-chart-demo__col">
<span class="column-chart-demo__value">60<span class="column-chart-demo__value-extra">+10</span></span>
<div class="column-chart-demo__track">
<div class="column-chart-demo__seg column-chart-demo__seg--base" style="height:60%;"></div>
</div>
<span class="column-chart-demo__label">Wk2</span>
</div>
<div class="column-chart-demo__col">
<span class="column-chart-demo__value">30<span class="column-chart-demo__value-extra">+25</span></span>
<div class="column-chart-demo__track">
<div class="column-chart-demo__seg column-chart-demo__seg--base" style="height:30%;"></div>
</div>
<span class="column-chart-demo__label">Wk3</span>
</div>
<div class="column-chart-demo__col">
<span class="column-chart-demo__value">70<span class="column-chart-demo__value-extra">+5</span></span>
<div class="column-chart-demo__track">
<div class="column-chart-demo__seg column-chart-demo__seg--base" style="height:70%;"></div>
</div>
<span class="column-chart-demo__label">Wk4</span>
</div>
<div class="column-chart-demo__col">
<span class="column-chart-demo__value">50<span class="column-chart-demo__value-extra">+20</span></span>
<div class="column-chart-demo__track">
<div class="column-chart-demo__seg column-chart-demo__seg--base" style="height:50%;"></div>
</div>
<span class="column-chart-demo__label">Wk5</span>
</div>
</div>
<p class="column-chart-demo__legend"><span class="column-chart-demo__swatch column-chart-demo__swatch--base"></span> Base</p>
</figure>
<style>
.column-chart-demo { font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border: 1.5px solid #24143022; border-radius: 12px; box-sizing: border-box; max-width: 640px; }
.column-chart-demo__title { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.column-chart-demo__chart { display: flex; align-items: flex-end; gap: 16px; height: 150px; }
.column-chart-demo__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 44px; }
.column-chart-demo__value { font-size: 10px; font-variant-numeric: tabular-nums; }
.column-chart-demo__value-extra { color: #24143099; margin-left: 2px; }
.column-chart-demo--stacked .column-chart-demo__value-extra { display: inline; }
.column-chart-demo__value-extra { display: none; }
.column-chart-demo__track { width: 28px; flex: 1; display: flex; flex-direction: column-reverse; background: #24143010; border-radius: 4px; overflow: hidden; }
.column-chart-demo__seg--base { background: var(--accent); }
.column-chart-demo__seg--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, #FAF7F2 4px 8px); opacity: .85; }
.column-chart-demo__label { font-size: 11px; font-weight: 600; }
.column-chart-demo__legend { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 11px; }
.column-chart-demo__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.column-chart-demo__swatch--base { background: var(--accent); }
.column-chart-demo__swatch--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 3px, #FAF7F2 3px 6px); margin-left: 8px; }
.column-chart-demo--count-3 .column-chart-demo__col:nth-child(n+4) { display: none; }
.column-chart-demo--count-4 .column-chart-demo__col:nth-child(n+5) { display: none; }
</style><figure class="column-chart-tw column-chart-tw--count-5 max-w-[640px] p-4 border-[1.5px] border-[#24143022] rounded-xl box-border font-sans text-[#241430] bg-[#FAF7F2]" style="--accent:#E8A020;">
<figcaption class="text-[13px] font-semibold mb-3">Weekly sales</figcaption>
<div class="flex items-end gap-4" style="height:150px;" role="img" aria-label="Column chart of weekly sales, base orders per week with returns stacked on top when enabled">
<div class="column-chart-tw__col">
<span class="column-chart-tw__value">40<span class="column-chart-tw__value-extra">+15</span></span>
<div class="column-chart-tw__track">
<div class="column-chart-tw__seg column-chart-tw__seg--base" style="height:40%;"></div>
</div>
<span class="column-chart-tw__label">Wk1</span>
</div>
<div class="column-chart-tw__col">
<span class="column-chart-tw__value">60<span class="column-chart-tw__value-extra">+10</span></span>
<div class="column-chart-tw__track">
<div class="column-chart-tw__seg column-chart-tw__seg--base" style="height:60%;"></div>
</div>
<span class="column-chart-tw__label">Wk2</span>
</div>
<div class="column-chart-tw__col">
<span class="column-chart-tw__value">30<span class="column-chart-tw__value-extra">+25</span></span>
<div class="column-chart-tw__track">
<div class="column-chart-tw__seg column-chart-tw__seg--base" style="height:30%;"></div>
</div>
<span class="column-chart-tw__label">Wk3</span>
</div>
<div class="column-chart-tw__col">
<span class="column-chart-tw__value">70<span class="column-chart-tw__value-extra">+5</span></span>
<div class="column-chart-tw__track">
<div class="column-chart-tw__seg column-chart-tw__seg--base" style="height:70%;"></div>
</div>
<span class="column-chart-tw__label">Wk4</span>
</div>
<div class="column-chart-tw__col">
<span class="column-chart-tw__value">50<span class="column-chart-tw__value-extra">+20</span></span>
<div class="column-chart-tw__track">
<div class="column-chart-tw__seg column-chart-tw__seg--base" style="height:50%;"></div>
</div>
<span class="column-chart-tw__label">Wk5</span>
</div>
</div>
<p class="flex items-center gap-1.5 mt-3 text-[11px]"><span class="column-chart-tw__swatch column-chart-tw__swatch--base inline-block w-2.5 h-2.5 rounded-sm"></span> Base</p>
</figure>
<style>
.column-chart-tw__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 44px; }
.column-chart-tw__value-extra { display: none; color: #24143099; margin-left: 2px; }
.column-chart-tw--stacked .column-chart-tw__value-extra { display: inline; }
.column-chart-tw__track { width: 28px; flex: 1; display: flex; flex-direction: column-reverse; background: #24143010; border-radius: 4px; overflow: hidden; }
.column-chart-tw__seg--base { background: var(--accent); }
.column-chart-tw__seg--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, #FAF7F2 4px 8px); opacity: .85; }
.column-chart-tw__label { font-size: 11px; font-weight: 600; }
.column-chart-tw__swatch--base { background: var(--accent); }
.column-chart-tw__swatch--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 3px, #FAF7F2 3px 6px); }
.column-chart-tw--count-3 .column-chart-tw__col:nth-child(n+4) { display: none; }
.column-chart-tw--count-4 .column-chart-tw__col:nth-child(n+5) { display: none; }
</style>export function ColumnChart({
stacked = false,
accent = "#E8A020",
columnCount = "5",
showValues = true,
}) {
const all = [
{ label: "Wk1", base: 40, extra: 15 },
{ label: "Wk2", base: 60, extra: 10 },
{ label: "Wk3", base: 30, extra: 25 },
{ label: "Wk4", base: 70, extra: 5 },
{ label: "Wk5", base: 50, extra: 20 },
];
const cols = all.slice(0, Number(columnCount));
const extraFill = "repeating-linear-gradient(45deg, " + accent + " 0 4px, #FAF7F2 4px 8px)";
return (
<figure style={{ font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, border: "1.5px solid #24143022", borderRadius: 12, boxSizing: "border-box", maxWidth: 640 }}>
<figcaption style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Weekly sales{stacked ? " (base + returns)" : ""}</figcaption>
<div style={{ display: "flex", alignItems: "flex-end", gap: 16, height: 150 }} role="img" aria-label="Column chart of weekly sales, base orders per week with returns stacked on top when enabled">
{cols.map((c) => (
<div key={c.label} style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 4, height: "100%", width: 44 }}>
{showValues && <span style={{ fontSize: 10 }}>{c.base}{stacked && <span style={{ color: "#24143099", marginLeft: 2 }}>+{c.extra}</span>}</span>}
<div style={{ width: 28, flex: 1, display: "flex", flexDirection: "column-reverse", background: "#24143010", borderRadius: 4, overflow: "hidden" }}>
<div style={{ height: c.base + "%", background: accent }} />
{stacked && <div style={{ height: c.extra + "%", backgroundImage: extraFill, opacity: 0.85 }} />}
</div>
<span style={{ fontSize: 11, fontWeight: 600 }}>{c.label}</span>
</div>
))}
</div>
<p style={{ display: "flex", alignItems: "center", gap: 6, margin: "12px 0 0", fontSize: 11 }}>
<span style={{ display: "inline-block", width: 10, height: 10, borderRadius: 2, background: accent }} /> Base
{stacked && (
<>
<span style={{ display: "inline-block", width: 10, height: 10, borderRadius: 2, backgroundImage: extraFill, marginLeft: 8 }} /> Returns
</>
)}
</p>
</figure>
);
}