Reference Line

Target/threshold line on a chart.

html

<figure class="reference-line reference-line--dashed" style="--accent:#E8A020;--pos:65;" role="img" aria-label="Bar chart with a reference line labelled Target at 65 percent of the axis">
  <figcaption class="reference-line__title">Weekly output vs. reference line</figcaption>
  <svg class="reference-line__svg" viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
    <g aria-hidden="true">
      <line class="rl-grid" x1="20" y1="10" x2="20" y2="100"></line>
      <line class="rl-grid" x1="20" y1="100" x2="212" y2="100"></line>
      <line class="rl-gridline" x1="20" y1="10" x2="212" y2="10"></line>
      <line class="rl-gridline" x1="20" y1="55" x2="212" y2="55"></line>
      <text class="rl-tick" x="16" y="103">0%</text>
      <text class="rl-tick" x="16" y="58">50%</text>
      <text class="rl-tick" x="16" y="13">100%</text></g>
    <g aria-hidden="true">
      <rect class="rl-bar" x="30" y="64" width="24" height="36"></rect>
      <rect class="rl-bar" x="68" y="50.5" width="24" height="49.5"></rect>
      <rect class="rl-bar" x="106" y="68.5" width="24" height="31.5"></rect>
      <rect class="rl-bar" x="144" y="46" width="24" height="54"></rect>
      <rect class="rl-bar" x="182" y="55" width="24" height="45"></rect></g>
    <line class="reference-line__refline" x1="20" x2="212"></line>
    <text class="reference-line__reflabel" x="208">Target</text>
  </svg>
</figure>
<style>
.reference-line { max-width: 420px; font: 12px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 14px; box-sizing: border-box; }
.reference-line__title { font-size: 12px; font-weight: 600; margin: 0 0 8px; }
.reference-line__svg { width: 100%; height: auto; display: block; overflow: visible; }
.reference-line .rl-grid { stroke: #24143055; stroke-width: 1; }
.reference-line .rl-gridline { stroke: #24143014; stroke-width: 1; }
.reference-line .rl-tick { font-size: 8px; fill: #24143099; text-anchor: end; }
.reference-line .rl-bar { fill: #BFD9F2; }
.reference-line__refline { stroke: var(--accent); stroke-width: 2; y1: calc(100px - (var(--pos) * 0.9px)); y2: calc(100px - (var(--pos) * 0.9px)); }
.reference-line--dashed .reference-line__refline { stroke-dasharray: 6 4; }
.reference-line--solid .reference-line__refline { stroke-dasharray: none; }
.reference-line--dotted .reference-line__refline { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.reference-line__reflabel { fill: var(--accent); font-size: 10px; font-weight: 700; text-anchor: end; y: calc(100px - (var(--pos) * 0.9px) - 5px); }
</style>

tailwind

<figure class="reference-line-tw reference-line-tw--dashed max-w-[420px] p-3.5 font-sans text-[#241430] bg-[#FAF7F2] box-border" style="--accent:#E8A020;--pos:65;" role="img" aria-label="Bar chart with a reference line labelled Target at 65 percent of the axis">
  <figcaption class="text-xs font-semibold mb-2">Weekly output vs. reference line</figcaption>
  <svg class="w-full h-auto block" style="overflow:visible;" viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
    <g aria-hidden="true">
      <line class="reference-line-tw__grid" x1="20" y1="10" x2="20" y2="100"></line>
      <line class="reference-line-tw__grid" x1="20" y1="100" x2="212" y2="100"></line>
      <line class="reference-line-tw__gridline" x1="20" y1="10" x2="212" y2="10"></line>
      <line class="reference-line-tw__gridline" x1="20" y1="55" x2="212" y2="55"></line>
      <text class="reference-line-tw__tick" x="16" y="103">0%</text>
      <text class="reference-line-tw__tick" x="16" y="58">50%</text>
      <text class="reference-line-tw__tick" x="16" y="13">100%</text></g>
    <g aria-hidden="true">
      <rect class="reference-line-tw__bar" x="30" y="64" width="24" height="36"></rect>
      <rect class="reference-line-tw__bar" x="68" y="50.5" width="24" height="49.5"></rect>
      <rect class="reference-line-tw__bar" x="106" y="68.5" width="24" height="31.5"></rect>
      <rect class="reference-line-tw__bar" x="144" y="46" width="24" height="54"></rect>
      <rect class="reference-line-tw__bar" x="182" y="55" width="24" height="45"></rect></g>
    <line class="reference-line-tw__refline" x1="20" x2="212"></line>
    <text class="reference-line-tw__reflabel" x="208">Target</text>
  </svg>
</figure>
<style>
.reference-line-tw__grid { stroke: #24143055; stroke-width: 1; }
.reference-line-tw__gridline { stroke: #24143014; stroke-width: 1; }
.reference-line-tw__tick { font-size: 8px; fill: #24143099; text-anchor: end; }
.reference-line-tw__bar { fill: #BFD9F2; }
.reference-line-tw__refline { stroke: var(--accent); stroke-width: 2; y1: calc(100px - (var(--pos) * 0.9px)); y2: calc(100px - (var(--pos) * 0.9px)); }
.reference-line-tw--dashed .reference-line-tw__refline { stroke-dasharray: 6 4; }
.reference-line-tw--solid .reference-line-tw__refline { stroke-dasharray: none; }
.reference-line-tw--dotted .reference-line-tw__refline { stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.reference-line-tw__reflabel { fill: var(--accent); font-size: 10px; font-weight: 700; text-anchor: end; y: calc(100px - (var(--pos) * 0.9px) - 5px); }
</style>

react

export function ReferenceLine({
  label = "Target",
  positionPercent = 65,
  lineStyle = "dashed",
  accent = "#E8A020",
}) {
  const bars = [
    [30, 64, 36], [68, 50.5, 49.5], [106, 68.5, 31.5], [144, 46, 54], [182, 55, 45],
  ];
  const dash = { dashed: "6 4", solid: "none", dotted: "1.5 3.5" }[lineStyle] ?? "none";
  const y = 100 - positionPercent * 0.9;
  return (
    <figure role="img" aria-label={`Bar chart with a reference line labelled ${label} at ${positionPercent} percent of the axis`}
      style={{ maxWidth: 420, padding: 14, font: "12px system-ui, sans-serif", color: "#241430", background: "#FAF7F2", boxSizing: "border-box" }}>
      <figcaption style={{ fontSize: 12, fontWeight: 600, marginBottom: 8 }}>Weekly output vs. reference line</figcaption>
      <svg viewBox="0 0 220 120" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }}>
        <g aria-hidden="true">
          <line x1={20} y1={10} x2={20} y2={100} stroke="#24143055" />
          <line x1={20} y1={100} x2={212} y2={100} stroke="#24143055" />
          <line x1={20} y1={10} x2={212} y2={10} stroke="#24143014" />
          <line x1={20} y1={55} x2={212} y2={55} stroke="#24143014" />
          <text x={16} y={103} fontSize={8} fill="#24143099" textAnchor="end">0%</text>
          <text x={16} y={58} fontSize={8} fill="#24143099" textAnchor="end">50%</text>
          <text x={16} y={13} fontSize={8} fill="#24143099" textAnchor="end">100%</text>
        </g>
        <g aria-hidden="true">
          {bars.map(([x, by, h], i) => <rect key={i} x={x} y={by} width={24} height={h} fill="#BFD9F2" />)}
        </g>
        <line x1={20} y1={y} x2={212} y2={y} stroke={accent} strokeWidth={2} strokeDasharray={dash} strokeLinecap={lineStyle === "dotted" ? "round" : "butt"} />
        <text x={208} y={y - 5} fill={accent} fontSize={10} fontWeight={700} textAnchor="end">{label}</text>
      </svg>
    </figure>
  );
}