Drill-down Chart

Chart allowing navigation into detailed data.

html

<div class="drilldown">
  <details class="drilldown__row drilldown__row--1" open>
    <summary class="drilldown__summary">
      <span class="drilldown__name">Marketing</span>
      <span class="drilldown__bar-track">
        <span class="drilldown__bar-fill" style="width:100%;background:#F5C2E0;"></span>
      </span>
      <span class="drilldown__total">420</span>
    </summary>
    <ul class="drilldown__subs drilldown__subs--3">
        <li class="drilldown__sub drilldown__sub--1">
          <span class="drilldown__sub-bar" style="width:57%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Email</span>
          <span class="drilldown__sub-val">240</span>
        </li>
        <li class="drilldown__sub drilldown__sub--2">
          <span class="drilldown__sub-bar" style="width:29%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Social</span>
          <span class="drilldown__sub-val">120</span>
        </li>
        <li class="drilldown__sub drilldown__sub--3">
          <span class="drilldown__sub-bar" style="width:14%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Referral</span>
          <span class="drilldown__sub-val">60</span>
        </li>
    </ul>
  </details>
  <details class="drilldown__row drilldown__row--2">
    <summary class="drilldown__summary">
      <span class="drilldown__name">Sales</span>
      <span class="drilldown__bar-track">
        <span class="drilldown__bar-fill" style="width:71%;background:#F5C2E0;"></span>
      </span>
      <span class="drilldown__total">300</span>
    </summary>
    <ul class="drilldown__subs drilldown__subs--3">
        <li class="drilldown__sub drilldown__sub--1">
          <span class="drilldown__sub-bar" style="width:60%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">New</span>
          <span class="drilldown__sub-val">180</span>
        </li>
        <li class="drilldown__sub drilldown__sub--2">
          <span class="drilldown__sub-bar" style="width:30%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Repeat</span>
          <span class="drilldown__sub-val">90</span>
        </li>
        <li class="drilldown__sub drilldown__sub--3">
          <span class="drilldown__sub-bar" style="width:10%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Other</span>
          <span class="drilldown__sub-val">30</span>
        </li>
    </ul>
  </details>
  <details class="drilldown__row drilldown__row--3">
    <summary class="drilldown__summary">
      <span class="drilldown__name">Support</span>
      <span class="drilldown__bar-track">
        <span class="drilldown__bar-fill" style="width:43%;background:#F5C2E0;"></span>
      </span>
      <span class="drilldown__total">180</span>
    </summary>
    <ul class="drilldown__subs drilldown__subs--3">
        <li class="drilldown__sub drilldown__sub--1">
          <span class="drilldown__sub-bar" style="width:56%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Tickets</span>
          <span class="drilldown__sub-val">100</span>
        </li>
        <li class="drilldown__sub drilldown__sub--2">
          <span class="drilldown__sub-bar" style="width:33%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Calls</span>
          <span class="drilldown__sub-val">60</span>
        </li>
        <li class="drilldown__sub drilldown__sub--3">
          <span class="drilldown__sub-bar" style="width:11%;background:#F5C2E0;"></span>
          <span class="drilldown__sub-name">Chat</span>
          <span class="drilldown__sub-val">20</span>
        </li>
    </ul>
  </details>
  <table class="drilldown__srtable">
    <caption>Drill-down chart data: category totals with sub-category breakdown</caption>
    <thead><tr><th scope="col">Category</th><th scope="col">Total</th><th scope="col">Sub-category</th><th scope="col">Value</th></tr></thead>
    <tbody>
      <tr><th scope="row" rowspan="3">Marketing</th><td rowspan="3">420</td><td>Email</td><td>240</td></tr>
      <tr><td>Social</td><td>120</td></tr>
      <tr><td>Referral</td><td>60</td></tr>
      <tr><th scope="row" rowspan="3">Sales</th><td rowspan="3">300</td><td>New</td><td>180</td></tr>
      <tr><td>Repeat</td><td>90</td></tr>
      <tr><td>Other</td><td>30</td></tr>
      <tr><th scope="row" rowspan="3">Support</th><td rowspan="3">180</td><td>Tickets</td><td>100</td></tr>
      <tr><td>Calls</td><td>60</td></tr>
      <tr><td>Chat</td><td>20</td></tr>
    </tbody>
  </table>
</div>
<style>
.drilldown { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 400px; }
.drilldown__row { border: 1px solid #24143022; border-radius: 8px; margin-bottom: 8px; padding: 8px 10px; }
.drilldown__summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.drilldown__summary::-webkit-details-marker { display: none; }
.drilldown__summary::before { content: "\25B8"; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.drilldown__summary::before { transition: transform .15s ease; }
}
.drilldown__row[open] .drilldown__summary::before { transform: rotate(90deg); }
.drilldown__name { flex: none; width: 90px; font-weight: 600; }
.drilldown__bar-track { flex: 1; height: 10px; background: #24143014; border-radius: 5px; overflow: hidden; }
.drilldown__bar-fill { display: block; height: 100%; border-radius: 5px; }
.drilldown__total { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; }
.drilldown__subs { list-style: none; margin: 10px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.drilldown__sub { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.drilldown__sub-bar { display: block; height: 6px; width: 0; border-radius: 3px; flex: none; max-width: 90px; }
.drilldown__sub-name { flex: 1; }
.drilldown__sub-val { font-variant-numeric: tabular-nums; }
.drilldown__subs--2 .drilldown__sub--3 { display: none; }
.drilldown__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
</style>

tailwind

<div class="drilldown-tw max-w-[400px] font-sans text-sm text-[#241430]">
  <details class="drilldown-tw__row drilldown-tw__row--1" open>
    <summary class="drilldown-tw__summary">
      <span class="drilldown-tw__name">Marketing</span>
      <span class="drilldown-tw__bar-track">
        <span class="drilldown-tw__bar-fill" style="width:100%;background:#F5C2E0;"></span>
      </span>
      <span class="drilldown-tw__total">420</span>
    </summary>
    <ul class="drilldown-tw__subs drilldown-tw__subs--3">
        <li class="drilldown-tw__sub drilldown-tw__sub--1">
          <span class="drilldown-tw__sub-bar" style="width:57%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Email</span>
          <span class="drilldown-tw__sub-val">240</span>
        </li>
        <li class="drilldown-tw__sub drilldown-tw__sub--2">
          <span class="drilldown-tw__sub-bar" style="width:29%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Social</span>
          <span class="drilldown-tw__sub-val">120</span>
        </li>
        <li class="drilldown-tw__sub drilldown-tw__sub--3">
          <span class="drilldown-tw__sub-bar" style="width:14%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Referral</span>
          <span class="drilldown-tw__sub-val">60</span>
        </li>
    </ul>
  </details>
  <details class="drilldown-tw__row drilldown-tw__row--2">
    <summary class="drilldown-tw__summary">
      <span class="drilldown-tw__name">Sales</span>
      <span class="drilldown-tw__bar-track">
        <span class="drilldown-tw__bar-fill" style="width:71%;background:#F5C2E0;"></span>
      </span>
      <span class="drilldown-tw__total">300</span>
    </summary>
    <ul class="drilldown-tw__subs drilldown-tw__subs--3">
        <li class="drilldown-tw__sub drilldown-tw__sub--1">
          <span class="drilldown-tw__sub-bar" style="width:60%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">New</span>
          <span class="drilldown-tw__sub-val">180</span>
        </li>
        <li class="drilldown-tw__sub drilldown-tw__sub--2">
          <span class="drilldown-tw__sub-bar" style="width:30%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Repeat</span>
          <span class="drilldown-tw__sub-val">90</span>
        </li>
        <li class="drilldown-tw__sub drilldown-tw__sub--3">
          <span class="drilldown-tw__sub-bar" style="width:10%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Other</span>
          <span class="drilldown-tw__sub-val">30</span>
        </li>
    </ul>
  </details>
  <details class="drilldown-tw__row drilldown-tw__row--3">
    <summary class="drilldown-tw__summary">
      <span class="drilldown-tw__name">Support</span>
      <span class="drilldown-tw__bar-track">
        <span class="drilldown-tw__bar-fill" style="width:43%;background:#F5C2E0;"></span>
      </span>
      <span class="drilldown-tw__total">180</span>
    </summary>
    <ul class="drilldown-tw__subs drilldown-tw__subs--3">
        <li class="drilldown-tw__sub drilldown-tw__sub--1">
          <span class="drilldown-tw__sub-bar" style="width:56%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Tickets</span>
          <span class="drilldown-tw__sub-val">100</span>
        </li>
        <li class="drilldown-tw__sub drilldown-tw__sub--2">
          <span class="drilldown-tw__sub-bar" style="width:33%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Calls</span>
          <span class="drilldown-tw__sub-val">60</span>
        </li>
        <li class="drilldown-tw__sub drilldown-tw__sub--3">
          <span class="drilldown-tw__sub-bar" style="width:11%;background:#F5C2E0;"></span>
          <span class="drilldown-tw__sub-name">Chat</span>
          <span class="drilldown-tw__sub-val">20</span>
        </li>
    </ul>
  </details>
  <table class="absolute w-px h-px overflow-hidden" style="clip:rect(0 0 0 0)">
    <caption>Drill-down chart data: category totals with sub-category breakdown</caption>
    <thead><tr><th scope="col">Category</th><th scope="col">Total</th><th scope="col">Sub-category</th><th scope="col">Value</th></tr></thead>
    <tbody>
      <tr><th scope="row" rowspan="3">Marketing</th><td rowspan="3">420</td><td>Email</td><td>240</td></tr>
      <tr><td>Social</td><td>120</td></tr>
      <tr><td>Referral</td><td>60</td></tr>
      <tr><th scope="row" rowspan="3">Sales</th><td rowspan="3">300</td><td>New</td><td>180</td></tr>
      <tr><td>Repeat</td><td>90</td></tr>
      <tr><td>Other</td><td>30</td></tr>
      <tr><th scope="row" rowspan="3">Support</th><td rowspan="3">180</td><td>Tickets</td><td>100</td></tr>
      <tr><td>Calls</td><td>60</td></tr>
      <tr><td>Chat</td><td>20</td></tr>
    </tbody>
  </table>
</div>
<style>
.drilldown-tw__row { border: 1px solid #24143022; border-radius: 8px; margin-bottom: 8px; padding: 8px 10px; }
.drilldown-tw__summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.drilldown-tw__summary::-webkit-details-marker { display: none; }
.drilldown-tw__summary::before { content: "\25B8"; flex: none; }
@media (prefers-reduced-motion: no-preference) {
.drilldown-tw__summary::before { transition: transform .15s ease; }
}
.drilldown-tw__row[open] .drilldown-tw__summary::before { transform: rotate(90deg); }
.drilldown-tw__name { flex: none; width: 90px; font-weight: 600; }
.drilldown-tw__bar-track { flex: 1; height: 10px; background: #24143014; border-radius: 5px; overflow: hidden; }
.drilldown-tw__bar-fill { display: block; height: 100%; border-radius: 5px; }
.drilldown-tw__total { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; }
.drilldown-tw__subs { list-style: none; margin: 10px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
.drilldown-tw__sub { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.drilldown-tw__sub-bar { display: block; height: 6px; width: 0; border-radius: 3px; flex: none; max-width: 90px; }
.drilldown-tw__sub-name { flex: 1; }
.drilldown-tw__sub-val { font-variant-numeric: tabular-nums; }
.drilldown-tw__subs--2 .drilldown-tw__sub--3 { display: none; }
</style>

react

export function DrillDownChart({
  category = "Marketing",
  expanded = true,
  accent = "#F5C2E0",
  subCount = "3",
  showValues = true,
}) {
  const bars = [{"isFirst":true,"total":420,"subs":[{"name":"Email","value":240},{"name":"Social","value":120},{"name":"Referral","value":60}]},{"name":"Sales","total":300,"subs":[{"name":"New","value":180},{"name":"Repeat","value":90},{"name":"Other","value":30}]},{"name":"Support","total":180,"subs":[{"name":"Tickets","value":100},{"name":"Calls","value":60},{"name":"Chat","value":20}]}];
  const maxTotal = 420;
  const count = Number(subCount);
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", maxWidth: 400 }}>
      {bars.map((bar, i) => {
        const name = bar.isFirst ? category : bar.name;
        const pct = Math.round((bar.total / maxTotal) * 100);
        return (
          <details key={name} open={i === 0 ? expanded : undefined}
            style={{ border: "1px solid #24143022", borderRadius: 8, marginBottom: 8, padding: "8px 10px" }}>
            <summary style={{ display: "flex", alignItems: "center", gap: 10, cursor: "pointer", listStyle: "none" }}>
              <span style={{ flex: "none", width: 90, fontWeight: 600 }}>{name}</span>
              <span style={{ flex: 1, height: 10, background: "#24143014", borderRadius: 5, overflow: "hidden", display: "inline-block" }}>
                <span style={{ display: "block", height: "100%", width: `${pct}%`, borderRadius: 5, background: accent }} />
              </span>
              {showValues && <span style={{ flex: "none", fontVariantNumeric: "tabular-nums", fontSize: 13 }}>{bar.total}</span>}
            </summary>
            <ul style={{ listStyle: "none", margin: "10px 0 0", padding: "0 0 0 20px", display: "flex", flexDirection: "column", gap: 6 }}>
              {bar.subs.slice(0, count).map((s) => (
                <li key={s.name} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 12 }}>
                  <span style={{ display: "block", height: 6, width: `${Math.round((s.value / bar.total) * 90)}px`, borderRadius: 3, flex: "none", background: accent }} />
                  <span style={{ flex: 1 }}>{s.name}</span>
                  {showValues && <span style={{ fontVariantNumeric: "tabular-nums" }}>{s.value}</span>}
                </li>
              ))}
            </ul>
          </details>
        );
      })}
    </div>
  );
}