Drill-through

Navigate from one data context to another.

html

<div class="dt-demo" style="--accent:#241430;">
  <div class="dt-demo__chart">
    <div class="dt-demo__bar" style="height:30%;"></div>
    <div class="dt-demo__bar" style="height:52%;"></div>
    <div class="dt-demo__bar dt-demo__bar--flagged" style="height:88%;"><span class="dt-demo__label">Refund spike, March</span></div>
    <div class="dt-demo__bar" style="height:40%;"></div>
  </div>
  
</div>
<style>
.dt-demo { width: 300px; font: 13px system-ui, sans-serif; color: #241430; }
.dt-demo__chart { height: 90px; display: flex; align-items: flex-end; gap: 10px; }
.dt-demo__bar { flex: 1; background: #24143018; border-radius: 4px 4px 0 0; position: relative; }
.dt-demo__bar--flagged { background: var(--accent); cursor: pointer; }
.dt-demo__label { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; white-space: nowrap; color: var(--accent); font-weight: 700; }
.dt-demo__arrow { text-align: center; color: var(--accent); font-size: 16px; margin: 10px 0; }
.dt-demo__record { padding: 12px 14px; border-radius: 8px; background: #FAF7F2; border: 1.5px solid var(--accent); }
.dt-demo__record-title { margin: 0 0 4px; font-weight: 700; }
.dt-demo__record-row { margin: 0; color: #241430aa; }
</style>

tailwind

<div style="width:300px;font-family:system-ui,sans-serif;color:#241430">
  <div class="h-[90px] flex items-end gap-2.5">
    <div class="flex-1 rounded-t bg-[#24143018]" style="height:30%"></div>
    <div class="flex-1 rounded-t bg-[#24143018]" style="height:52%"></div>
    <div class="dt-tw-bar flex-1 rounded-t relative cursor-pointer" style="height:88%;background:#241430"><span class="absolute -top-5 left-1/2 -translate-x-1/2 text-[10px] whitespace-nowrap font-bold" style="color:#241430">Refund spike, March</span></div>
    <div class="flex-1 rounded-t bg-[#24143018]" style="height:40%"></div>
  </div>
  
</div>

react

export function DrillThrough({
  metric = "Refund spike, March",
  navigated = false,
  accent = "#241430",
}) {
  return (
    <div style={{ width: 300, fontFamily: "system-ui, sans-serif", fontSize: 13, color: "#241430" }}>
      <div style={{ height: 90, display: "flex", alignItems: "flex-end", gap: 10 }}>
        <div style={{ flex: 1, height: "30%", background: "#24143018", borderRadius: "4px 4px 0 0" }} />
        <div style={{ flex: 1, height: "52%", background: "#24143018", borderRadius: "4px 4px 0 0" }} />
        <div style={{ flex: 1, height: "88%", background: accent, borderRadius: "4px 4px 0 0", position: "relative", cursor: "pointer" }}>
          <span style={{ position: "absolute", top: -20, left: "50%", transform: "translateX(-50%)", fontSize: 10, whiteSpace: "nowrap", color: accent, fontWeight: 700 }}>{metric}</span>
        </div>
        <div style={{ flex: 1, height: "40%", background: "#24143018", borderRadius: "4px 4px 0 0" }} />
      </div>
      {navigated && <>
        <div style={{ textAlign: "center", color: accent, fontSize: 16, margin: "10px 0" }}>&#8595;</div>
        <div style={{ padding: "12px 14px", borderRadius: 8, background: "#FAF7F2", border: "1.5px solid " + accent }}>
          <p style={{ margin: "0 0 4px", fontWeight: 700 }}>Transaction #48213</p>
          <p style={{ margin: 0, color: "#241430aa" }}>Order &mdash; $412.00 refunded</p>
        </div>
      </>}
    </div>
  );
}