Data Label

Label attached to chart data.

html

<div class="data-label-demo" style="--accent:#BFD9F2;">
  <div class="data-label-demo__track">
    <div class="data-label-demo__bar" style="height:70%;">
      <span class="data-label-demo__label data-label-demo__label--outside data-label-demo__label--fmt-number" style="font-size:13px;">
        <span class="data-label-demo__fmt data-label-demo__fmt--number">42</span>
        <span class="data-label-demo__fmt data-label-demo__fmt--percent">42%</span>
        <span class="data-label-demo__fmt data-label-demo__fmt--currency">$42</span>
      </span>
    </div>
  </div>
  <span class="data-label-demo__axis">Q3</span>
</div>
<style>
.data-label-demo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 24px 20px 14px; border: 1.5px solid #24143022; border-radius: 12px; box-sizing: border-box; width: 120px; }
.data-label-demo__track { position: relative; width: 40px; height: 130px; background: #24143010; border-radius: 6px; display: flex; align-items: flex-end; overflow: visible; }
.data-label-demo__bar { position: relative; width: 100%; background: var(--accent); border-radius: 6px 6px 0 0; }
.data-label-demo__label { position: absolute; font-weight: 700; white-space: nowrap; }
.data-label-demo__fmt { display: none; }
.data-label-demo__label--fmt-number .data-label-demo__fmt--number,
.data-label-demo__label--fmt-percent .data-label-demo__fmt--percent,
.data-label-demo__label--fmt-currency .data-label-demo__fmt--currency { display: inline; }
.data-label-demo__label--inside { top: 8px; left: 50%; transform: translateX(-50%); color: #241430; }
.data-label-demo__label--outside { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); color: #241430; }
.data-label-demo__label--above { top: -22px; left: 50%; transform: translateX(-50%); color: #241430; }
.data-label-demo__axis { font-size: 11px; color: #24143099; font-weight: 600; }
</style>

tailwind

<div class="data-label-tw relative flex flex-col items-center gap-1.5 font-sans text-xs text-[#241430] bg-[#FAF7F2] px-5 pt-6 pb-3.5 border-[1.5px] border-[#24143022] rounded-xl box-border" style="width:120px;--accent:#BFD9F2;">
  <div class="relative w-10 bg-[#24143010] rounded-md flex items-end" style="height:130px;overflow:visible;">
    <div class="data-label-tw__bar relative w-full rounded-t-md" style="height:70%;background:#BFD9F2;">
      <span class="data-label-tw__label data-label-tw__label--outside data-label-tw__label--fmt-number absolute font-bold whitespace-nowrap text-[#241430]" style="font-size:13px;">
        <span class="data-label-tw__fmt data-label-tw__fmt--number">42</span>
        <span class="data-label-tw__fmt data-label-tw__fmt--percent">42%</span>
        <span class="data-label-tw__fmt data-label-tw__fmt--currency">$42</span>
      </span>
    </div>
  </div>
  <span class="text-[11px] text-[#241430]/60 font-semibold">Q3</span>
</div>
<style>
.data-label-tw__fmt { display: none; }
.data-label-tw__label--fmt-number .data-label-tw__fmt--number,
.data-label-tw__label--fmt-percent .data-label-tw__fmt--percent,
.data-label-tw__label--fmt-currency .data-label-tw__fmt--currency { display: inline; }
.data-label-tw__label--inside { top: 8px; left: 50%; transform: translateX(-50%); }
.data-label-tw__label--outside { top: 50%; left: calc(100% + 8px); transform: translateY(-50%); }
.data-label-tw__label--above { top: -22px; left: 50%; transform: translateX(-50%); }
</style>

react

export function DataLabel({
  value = 42,
  position = "outside",
  format = "number",
  accent = "#BFD9F2",
  size = 13,
}) {
  const text = { number: String(value), percent: value + "%", currency: "$" + value }[format];
  const posStyle = {
    inside: { top: 8, left: "50%", transform: "translateX(-50%)" },
    outside: { top: "50%", left: "calc(100% + 8px)", transform: "translateY(-50%)" },
    above: { top: -22, left: "50%", transform: "translateX(-50%)" },
  }[position];
  return (
    <div style={{ position: "relative", display: "flex", flexDirection: "column", alignItems: "center", gap: 6, font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: "24px 20px 14px", border: "1.5px solid #24143022", borderRadius: 12, boxSizing: "border-box", width: 120 }}>
      <div style={{ position: "relative", width: 40, height: 130, background: "#24143010", borderRadius: 6, display: "flex", alignItems: "flex-end", overflow: "visible" }}>
        <div style={{ position: "relative", width: "100%", height: "70%", background: accent, borderRadius: "6px 6px 0 0" }}>
          <span style={{ position: "absolute", fontWeight: 700, whiteSpace: "nowrap", color: "#241430", fontSize: size, ...posStyle }}>{text}</span>
        </div>
      </div>
      <span style={{ fontSize: 11, color: "#24143099", fontWeight: 600 }}>Q3</span>
    </div>
  );
}