Bar Chart

Values represented by bars.

Orders this week
Mon
50
Tue
75
Wed
35
Thu
90
Fri
60
50
Mon
75
Tue
35
Wed
90
Thu
60
Fri
Orders this week, by day
DayOrders
Mon50 orders
Tue75 orders
Wed35 orders
Thu90 orders
Fri60 orders

html

<figure class="bar-chart-demo bar-chart-demo--horizontal bar-chart-demo--count-5" style="--accent:#A8E6C1;">
  <figcaption class="bar-chart-demo__title">Orders this week</figcaption>
  <div class="bar-chart-demo__chart bar-chart-demo__chart--horizontal">
      <div class="bar-chart-demo__row">
        <span class="bar-chart-demo__label">Mon</span>
        <div class="bar-chart-demo__track"><div class="bar-chart-demo__bar" style="width:50%;"></div></div>
        <span class="bar-chart-demo__value">50</span>
      </div>
      <div class="bar-chart-demo__row">
        <span class="bar-chart-demo__label">Tue</span>
        <div class="bar-chart-demo__track"><div class="bar-chart-demo__bar" style="width:75%;"></div></div>
        <span class="bar-chart-demo__value">75</span>
      </div>
      <div class="bar-chart-demo__row">
        <span class="bar-chart-demo__label">Wed</span>
        <div class="bar-chart-demo__track"><div class="bar-chart-demo__bar" style="width:35%;"></div></div>
        <span class="bar-chart-demo__value">35</span>
      </div>
      <div class="bar-chart-demo__row">
        <span class="bar-chart-demo__label">Thu</span>
        <div class="bar-chart-demo__track"><div class="bar-chart-demo__bar" style="width:90%;"></div></div>
        <span class="bar-chart-demo__value">90</span>
      </div>
      <div class="bar-chart-demo__row">
        <span class="bar-chart-demo__label">Fri</span>
        <div class="bar-chart-demo__track"><div class="bar-chart-demo__bar" style="width:60%;"></div></div>
        <span class="bar-chart-demo__value">60</span>
      </div>
  </div>
  <div class="bar-chart-demo__chart bar-chart-demo__chart--vertical">
      <div class="bar-chart-demo__col">
        <span class="bar-chart-demo__vvalue">50</span>
        <div class="bar-chart-demo__vtrack"><div class="bar-chart-demo__vbar" style="height:50%;"></div></div>
        <span class="bar-chart-demo__vlabel">Mon</span>
      </div>
      <div class="bar-chart-demo__col">
        <span class="bar-chart-demo__vvalue">75</span>
        <div class="bar-chart-demo__vtrack"><div class="bar-chart-demo__vbar" style="height:75%;"></div></div>
        <span class="bar-chart-demo__vlabel">Tue</span>
      </div>
      <div class="bar-chart-demo__col">
        <span class="bar-chart-demo__vvalue">35</span>
        <div class="bar-chart-demo__vtrack"><div class="bar-chart-demo__vbar" style="height:35%;"></div></div>
        <span class="bar-chart-demo__vlabel">Wed</span>
      </div>
      <div class="bar-chart-demo__col">
        <span class="bar-chart-demo__vvalue">90</span>
        <div class="bar-chart-demo__vtrack"><div class="bar-chart-demo__vbar" style="height:90%;"></div></div>
        <span class="bar-chart-demo__vlabel">Thu</span>
      </div>
      <div class="bar-chart-demo__col">
        <span class="bar-chart-demo__vvalue">60</span>
        <div class="bar-chart-demo__vtrack"><div class="bar-chart-demo__vbar" style="height:60%;"></div></div>
        <span class="bar-chart-demo__vlabel">Fri</span>
      </div>
  </div>
  <table class="bar-chart-demo__table">
    <caption>Orders this week, by day</caption>
    <thead><tr><th scope="col">Day</th><th scope="col">Orders</th></tr></thead>
    <tbody>
      <tr><th scope="row">Mon</th><td>50 orders</td></tr>
        <tr><th scope="row">Tue</th><td>75 orders</td></tr>
        <tr><th scope="row">Wed</th><td>35 orders</td></tr>
        <tr><th scope="row">Thu</th><td>90 orders</td></tr>
        <tr><th scope="row">Fri</th><td>60 orders</td></tr>
    </tbody>
  </table>
</figure>
<style>
.bar-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; }
.bar-chart-demo__title { font-size: 13px; font-weight: 600; margin: 0 0 12px; }
.bar-chart-demo__chart { display: none; }
.bar-chart-demo--horizontal .bar-chart-demo__chart--horizontal { display: flex; flex-direction: column; gap: 8px; }
.bar-chart-demo--vertical .bar-chart-demo__chart--vertical { display: flex; align-items: flex-end; gap: 14px; height: 140px; }
.bar-chart-demo__row { display: flex; align-items: center; gap: 8px; }
.bar-chart-demo__label { width: 32px; flex-shrink: 0; font-size: 11px; font-weight: 600; }
.bar-chart-demo__track { flex: 1; height: 16px; background: #24143010; border-radius: 4px; overflow: hidden; }
.bar-chart-demo__bar { height: 100%; background: var(--accent); border-radius: 4px; }
.bar-chart-demo__value { width: 26px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
.bar-chart-demo__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 40px; }
.bar-chart-demo__vtrack { width: 24px; flex: 1; display: flex; align-items: flex-end; background: #24143010; border-radius: 4px; overflow: hidden; }
.bar-chart-demo__vbar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-chart-demo__vvalue { font-size: 10px; font-variant-numeric: tabular-nums; }
.bar-chart-demo__vlabel { font-size: 11px; font-weight: 600; }
.bar-chart-demo__table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar-chart-demo--count-3 .bar-chart-demo__row:nth-child(n+4),
.bar-chart-demo--count-3 .bar-chart-demo__col:nth-child(n+4) { display: none; }
.bar-chart-demo--count-4 .bar-chart-demo__row:nth-child(n+5),
.bar-chart-demo--count-4 .bar-chart-demo__col:nth-child(n+5) { display: none; }
</style>

tailwind

<figure class="bar-chart-tw bar-chart-tw--horizontal bar-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:#A8E6C1;">
  <figcaption class="text-[13px] font-semibold mb-3">Orders this week</figcaption>
  <div class="bar-chart-tw__chart bar-chart-tw__chart--horizontal flex-col gap-2">
      <div class="bar-chart-tw__row">
        <span class="bar-chart-tw__label">Mon</span>
        <div class="bar-chart-tw__track"><div class="bar-chart-tw__bar" style="width:50%;"></div></div>
        <span class="bar-chart-tw__value">50</span>
      </div>
      <div class="bar-chart-tw__row">
        <span class="bar-chart-tw__label">Tue</span>
        <div class="bar-chart-tw__track"><div class="bar-chart-tw__bar" style="width:75%;"></div></div>
        <span class="bar-chart-tw__value">75</span>
      </div>
      <div class="bar-chart-tw__row">
        <span class="bar-chart-tw__label">Wed</span>
        <div class="bar-chart-tw__track"><div class="bar-chart-tw__bar" style="width:35%;"></div></div>
        <span class="bar-chart-tw__value">35</span>
      </div>
      <div class="bar-chart-tw__row">
        <span class="bar-chart-tw__label">Thu</span>
        <div class="bar-chart-tw__track"><div class="bar-chart-tw__bar" style="width:90%;"></div></div>
        <span class="bar-chart-tw__value">90</span>
      </div>
      <div class="bar-chart-tw__row">
        <span class="bar-chart-tw__label">Fri</span>
        <div class="bar-chart-tw__track"><div class="bar-chart-tw__bar" style="width:60%;"></div></div>
        <span class="bar-chart-tw__value">60</span>
      </div>
  </div>
  <div class="bar-chart-tw__chart bar-chart-tw__chart--vertical items-end gap-3.5" style="height:140px;">
      <div class="bar-chart-tw__col">
        <span class="bar-chart-tw__vvalue">50</span>
        <div class="bar-chart-tw__vtrack"><div class="bar-chart-tw__vbar" style="height:50%;"></div></div>
        <span class="bar-chart-tw__vlabel">Mon</span>
      </div>
      <div class="bar-chart-tw__col">
        <span class="bar-chart-tw__vvalue">75</span>
        <div class="bar-chart-tw__vtrack"><div class="bar-chart-tw__vbar" style="height:75%;"></div></div>
        <span class="bar-chart-tw__vlabel">Tue</span>
      </div>
      <div class="bar-chart-tw__col">
        <span class="bar-chart-tw__vvalue">35</span>
        <div class="bar-chart-tw__vtrack"><div class="bar-chart-tw__vbar" style="height:35%;"></div></div>
        <span class="bar-chart-tw__vlabel">Wed</span>
      </div>
      <div class="bar-chart-tw__col">
        <span class="bar-chart-tw__vvalue">90</span>
        <div class="bar-chart-tw__vtrack"><div class="bar-chart-tw__vbar" style="height:90%;"></div></div>
        <span class="bar-chart-tw__vlabel">Thu</span>
      </div>
      <div class="bar-chart-tw__col">
        <span class="bar-chart-tw__vvalue">60</span>
        <div class="bar-chart-tw__vtrack"><div class="bar-chart-tw__vbar" style="height:60%;"></div></div>
        <span class="bar-chart-tw__vlabel">Fri</span>
      </div>
  </div>
  <table class="bar-chart-tw__table">
    <caption>Orders this week, by day</caption>
    <thead><tr><th scope="col">Day</th><th scope="col">Orders</th></tr></thead>
    <tbody>
      <tr><th scope="row">Mon</th><td>50 orders</td></tr>
        <tr><th scope="row">Tue</th><td>75 orders</td></tr>
        <tr><th scope="row">Wed</th><td>35 orders</td></tr>
        <tr><th scope="row">Thu</th><td>90 orders</td></tr>
        <tr><th scope="row">Fri</th><td>60 orders</td></tr>
    </tbody>
  </table>
</figure>
<style>
.bar-chart-tw__chart { display: none; }
.bar-chart-tw--horizontal .bar-chart-tw__chart--horizontal { display: flex; }
.bar-chart-tw--vertical .bar-chart-tw__chart--vertical { display: flex; }
.bar-chart-tw__row { display: flex; align-items: center; gap: 8px; }
.bar-chart-tw__label { width: 32px; flex-shrink: 0; font-size: 11px; font-weight: 600; }
.bar-chart-tw__track { flex: 1; height: 16px; background: #24143010; border-radius: 4px; overflow: hidden; }
.bar-chart-tw__bar { height: 100%; background: var(--accent); border-radius: 4px; }
.bar-chart-tw__value { width: 26px; text-align: right; font-size: 11px; }
.bar-chart-tw__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 40px; }
.bar-chart-tw__vtrack { width: 24px; flex: 1; display: flex; align-items: flex-end; background: #24143010; border-radius: 4px; overflow: hidden; }
.bar-chart-tw__vbar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-chart-tw__vvalue { font-size: 10px; }
.bar-chart-tw__vlabel { font-size: 11px; font-weight: 600; }
.bar-chart-tw__table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bar-chart-tw--count-3 .bar-chart-tw__row:nth-child(n+4),
.bar-chart-tw--count-3 .bar-chart-tw__col:nth-child(n+4) { display: none; }
.bar-chart-tw--count-4 .bar-chart-tw__row:nth-child(n+5),
.bar-chart-tw--count-4 .bar-chart-tw__col:nth-child(n+5) { display: none; }
</style>

react

export function BarChart({
  orientation = "horizontal",
  showValues = true,
  accent = "#A8E6C1",
  barCount = "5",
}) {
  const all = [
    { label: "Mon", pct: 50, val: 50 },
    { label: "Tue", pct: 75, val: 75 },
    { label: "Wed", pct: 35, val: 35 },
    { label: "Thu", pct: 90, val: 90 },
    { label: "Fri", pct: 60, val: 60 },
  ];
  const bars = all.slice(0, Number(barCount));
  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 }}>Orders this week</figcaption>
      {orientation === "horizontal" ? (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {bars.map((b) => (
            <div key={b.label} style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 32, flexShrink: 0, fontSize: 11, fontWeight: 600 }}>{b.label}</span>
              <div style={{ flex: 1, height: 16, background: "#24143010", borderRadius: 4, overflow: "hidden" }}>
                <div style={{ height: "100%", width: b.pct + "%", background: accent, borderRadius: 4 }} />
              </div>
              {showValues && <span style={{ width: 26, textAlign: "right", fontSize: 11 }}>{b.val}</span>}
            </div>
          ))}
        </div>
      ) : (
        <div style={{ display: "flex", alignItems: "flex-end", gap: 14, height: 140 }}>
          {bars.map((b) => (
            <div key={b.label} style={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "flex-end", gap: 4, height: "100%", width: 40 }}>
              {showValues && <span style={{ fontSize: 10 }}>{b.val}</span>}
              <div style={{ width: 24, flex: 1, display: "flex", alignItems: "flex-end", background: "#24143010", borderRadius: 4, overflow: "hidden" }}>
                <div style={{ width: "100%", height: b.pct + "%", background: accent, borderRadius: "4px 4px 0 0" }} />
              </div>
              <span style={{ fontSize: 11, fontWeight: 600 }}>{b.label}</span>
            </div>
          ))}
        </div>
      )}
      <table style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", whiteSpace: "nowrap" }}>
        <caption>Orders this week, by day</caption>
        <thead><tr><th scope="col">Day</th><th scope="col">Orders</th></tr></thead>
        <tbody>
          {bars.map((b) => (
            <tr key={b.label}><th scope="row">{b.label}</th><td>{b.val} orders</td></tr>
          ))}
        </tbody>
      </table>
    </figure>
  );
}