Axis

Measurement scale.

0$ 50$ 100$ 150$ 200$ 250$ 300$ 300$ 250$ 200$ 150$ 100$ 50$ 0$

html

<div class="axis-demo axis-demo--horizontal axis-demo--ticks-5">
  <svg class="axis-demo__svg axis-demo__svg--horizontal" viewBox="0 0 340 40" role="img" aria-label="Horizontal axis with tick marks in units of $">
    <line x1="20" y1="4" x2="320" y2="4" class="axis-demo__line" />
    <g class="axis-demo__ticks">
      <g class="axis-demo__tick"><line x1="20" x2="20" y1="4" y2="10" class="axis-demo__mark" /><text x="20" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">0$</text></g>
      <g class="axis-demo__tick"><line x1="70" x2="70" y1="4" y2="10" class="axis-demo__mark" /><text x="70" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">50$</text></g>
      <g class="axis-demo__tick"><line x1="120" x2="120" y1="4" y2="10" class="axis-demo__mark" /><text x="120" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">100$</text></g>
      <g class="axis-demo__tick"><line x1="170" x2="170" y1="4" y2="10" class="axis-demo__mark" /><text x="170" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">150$</text></g>
      <g class="axis-demo__tick"><line x1="220" x2="220" y1="4" y2="10" class="axis-demo__mark" /><text x="220" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">200$</text></g>
      <g class="axis-demo__tick"><line x1="270" x2="270" y1="4" y2="10" class="axis-demo__mark" /><text x="270" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">250$</text></g>
      <g class="axis-demo__tick"><line x1="320" x2="320" y1="4" y2="10" class="axis-demo__mark" /><text x="320" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">300$</text></g>
    </g>
  </svg>
  <svg class="axis-demo__svg axis-demo__svg--vertical" viewBox="0 0 60 110" role="img" aria-label="Vertical axis with tick marks in units of $">
    <line x1="30" y1="0" x2="30" y2="100" class="axis-demo__line" />
    <g class="axis-demo__ticks" transform="translate(30,0)">
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="10" y2="10" class="axis-demo__mark" /><text x="-10" y="13" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">300$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="25" y2="25" class="axis-demo__mark" /><text x="-10" y="28" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">250$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="40" y2="40" class="axis-demo__mark" /><text x="-10" y="43" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">200$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="55" y2="55" class="axis-demo__mark" /><text x="-10" y="58" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">150$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="70" y2="70" class="axis-demo__mark" /><text x="-10" y="73" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">100$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="85" y2="85" class="axis-demo__mark" /><text x="-10" y="88" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">50$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="100" y2="100" class="axis-demo__mark" /><text x="-10" y="103" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">0$</text></g>
    </g>
  </svg>
</div>
<style>
.axis-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; }
.axis-demo__svg { display: none; overflow: visible; }
.axis-demo__svg--horizontal { width: 100%; }
.axis-demo__svg--vertical { height: 140px; }
.axis-demo--horizontal .axis-demo__svg--horizontal { display: block; }
.axis-demo--vertical .axis-demo__svg--vertical { display: block; }
.axis-demo__line { stroke: #24143055; stroke-width: 1.5; }
.axis-demo__mark { stroke: #24143055; stroke-width: 1.5; }
.axis-demo__label { font-size: 9px; fill: #24143099; text-anchor: middle; }
.axis-demo__label--v { text-anchor: end; }
.axis-demo--ticks-5 .axis-demo__ticks .axis-demo__tick:nth-child(2),
.axis-demo--ticks-5 .axis-demo__ticks .axis-demo__tick:nth-child(6) { display: none; }
.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(2),
.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(3),
.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(5),
.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(6) { display: none; }
</style>

tailwind

<div class="axis-tw axis-tw--horizontal axis-tw--ticks-5 max-w-[640px] p-4 border-[1.5px] border-[#24143022] rounded-xl box-border font-sans text-[#241430] bg-[#FAF7F2]">
  <svg class="axis-tw__svg axis-tw__svg--horizontal w-full" style="overflow:visible;" viewBox="0 0 340 40" role="img" aria-label="Horizontal axis with tick marks in units of $">
    <line x1="20" y1="4" x2="320" y2="4" stroke="#24143055" stroke-width="1.5" />
    <g class="axis-tw__ticks">
      <g class="axis-demo__tick"><line x1="20" x2="20" y1="4" y2="10" class="axis-demo__mark" /><text x="20" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">0$</text></g>
      <g class="axis-demo__tick"><line x1="70" x2="70" y1="4" y2="10" class="axis-demo__mark" /><text x="70" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">50$</text></g>
      <g class="axis-demo__tick"><line x1="120" x2="120" y1="4" y2="10" class="axis-demo__mark" /><text x="120" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">100$</text></g>
      <g class="axis-demo__tick"><line x1="170" x2="170" y1="4" y2="10" class="axis-demo__mark" /><text x="170" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">150$</text></g>
      <g class="axis-demo__tick"><line x1="220" x2="220" y1="4" y2="10" class="axis-demo__mark" /><text x="220" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">200$</text></g>
      <g class="axis-demo__tick"><line x1="270" x2="270" y1="4" y2="10" class="axis-demo__mark" /><text x="270" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">250$</text></g>
      <g class="axis-demo__tick"><line x1="320" x2="320" y1="4" y2="10" class="axis-demo__mark" /><text x="320" y="24" class="axis-demo__label" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">300$</text></g>
    </g>
  </svg>
  <svg class="axis-tw__svg axis-tw__svg--vertical" style="height:140px;overflow:visible;" viewBox="0 0 60 110" role="img" aria-label="Vertical axis with tick marks in units of $">
    <line x1="30" y1="0" x2="30" y2="100" stroke="#24143055" stroke-width="1.5" />
    <g class="axis-tw__ticks" transform="translate(30,0)">
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="10" y2="10" class="axis-demo__mark" /><text x="-10" y="13" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">300$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="25" y2="25" class="axis-demo__mark" /><text x="-10" y="28" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">250$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="40" y2="40" class="axis-demo__mark" /><text x="-10" y="43" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">200$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="55" y2="55" class="axis-demo__mark" /><text x="-10" y="58" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">150$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="70" y2="70" class="axis-demo__mark" /><text x="-10" y="73" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">100$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="85" y2="85" class="axis-demo__mark" /><text x="-10" y="88" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">50$</text></g>
      <g class="axis-demo__tick"><line x1="0" x2="-6" y1="100" y2="100" class="axis-demo__mark" /><text x="-10" y="103" class="axis-demo__label axis-demo__label--v" style="transform-box:fit-content;transform-origin:center;transform:rotate(0deg);">0$</text></g>
    </g>
  </svg>
</div>
<style>
.axis-tw__svg { display: none; }
.axis-tw--horizontal .axis-tw__svg--horizontal { display: block; }
.axis-tw--vertical .axis-tw__svg--vertical { display: block; }
.axis-tw__ticks .axis-demo__label, .axis-tw__ticks text { font-size: 9px; fill: #24143099; text-anchor: middle; }
.axis-tw__svg--vertical .axis-tw__ticks text { text-anchor: end; }
.axis-tw__ticks line.axis-demo__mark, .axis-tw__ticks line { stroke: #24143055; stroke-width: 1.5; }
.axis-tw--ticks-5 .axis-tw__ticks .axis-demo__tick:nth-child(2),
.axis-tw--ticks-5 .axis-tw__ticks .axis-demo__tick:nth-child(6) { display: none; }
.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(2),
.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(3),
.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(5),
.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(6) { display: none; }
</style>

react

export function Axis({
  tickCount = "5",
  rotation = 0,
  unit = "$",
  orientation = "horizontal",
}) {
  const values = [0, 50, 100, 150, 200, 250, 300];
  const keepSets = {
    "7": [0, 1, 2, 3, 4, 5, 6],
    "5": [0, 2, 3, 4, 6],
    "3": [0, 3, 6],
  };
  const keep = keepSets[tickCount] ?? keepSets["7"];
  const labelStyle = { fontSize: 9, fill: "#24143099", transformBox: "fit-content", transformOrigin: "center", transform: "rotate(" + rotation + "deg)" };
  return (
    <div 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 }}>
      {orientation === "horizontal" ? (
        <svg viewBox="0 0 340 40" style={{ width: "100%", overflow: "visible" }} role="img" aria-label={"Horizontal axis with tick marks in units of " + unit}>
          <line x1="20" y1="4" x2="320" y2="4" stroke="#24143055" strokeWidth="1.5" />
          {values.map((v, i) => keep.includes(i) && (
            <g key={v}>
              <line x1={20 + i * 50} x2={20 + i * 50} y1="4" y2="10" stroke="#24143055" strokeWidth="1.5" />
              <text x={20 + i * 50} y="24" textAnchor="middle" style={labelStyle}>{v}{unit}</text>
            </g>
          ))}
        </svg>
      ) : (
        <svg viewBox="0 0 60 110" style={{ height: 140, overflow: "visible" }} role="img" aria-label={"Vertical axis with tick marks in units of " + unit}>
          <line x1="30" y1="0" x2="30" y2="100" stroke="#24143055" strokeWidth="1.5" />
          {values.slice().reverse().map((v, i) => keep.includes(values.length - 1 - i) && (
            <g key={v} transform="translate(30,0)">
              <line x1="0" x2="-6" y1={10 + i * 15} y2={10 + i * 15} stroke="#24143055" strokeWidth="1.5" />
              <text x="-10" y={10 + i * 15 + 3} textAnchor="end" style={labelStyle}>{v}{unit}</text>
            </g>
          ))}
        </svg>
      )}
    </div>
  );
}