Histogram

Distribution chart.

Score distribution — normal shape
0 pts 50 pts 100 pts

html

<figure class="histogram histogram--normal" style="max-width:320px;margin:0;">
  <figcaption class="histogram__caption">Score distribution &mdash; normal shape</figcaption>
  <svg class="histogram__chart" viewBox="0 0 220 122" role="img" aria-label="Histogram of scores, normal distribution shape, ten bins from 0 to 100 points">
    <g class="histogram__bars histogram__bars--normal">
      <rect class="histogram__bar" x="10" y="95.7" width="18" height="4.3" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="30" y="87.2" width="18" height="12.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="50" y="74.5" width="18" height="25.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="70" y="53.2" width="18" height="46.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="90" y="32" width="18" height="68" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="110" y="19.2" width="18" height="80.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="130" y="32" width="18" height="68" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="150" y="53.2" width="18" height="46.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="170" y="74.5" width="18" height="25.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="190" y="91.5" width="18" height="8.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
    </g>
    <g class="histogram__bars histogram__bars--skewed">
      <rect class="histogram__bar" x="10" y="23.5" width="18" height="76.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="30" y="40.5" width="18" height="59.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="50" y="57.5" width="18" height="42.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="70" y="70.2" width="18" height="29.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="90" y="81.3" width="18" height="18.7" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="110" y="88.1" width="18" height="11.9" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="130" y="92.4" width="18" height="7.6" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="150" y="94.9" width="18" height="5.1" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="170" y="96.6" width="18" height="3.4" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="190" y="98.3" width="18" height="1.7" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
    </g>
    <g class="histogram__bars histogram__bars--uniform">
      <rect class="histogram__bar" x="10" y="61.7" width="18" height="38.3" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="30" y="57.5" width="18" height="42.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="50" y="59.2" width="18" height="40.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="70" y="55.8" width="18" height="44.2" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="90" y="60.1" width="18" height="39.9" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="110" y="55" width="18" height="45" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="130" y="58.4" width="18" height="41.6" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="150" y="56.6" width="18" height="43.4" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="170" y="60.9" width="18" height="39.1" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram__bar" x="190" y="57.5" width="18" height="42.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
    </g>
    
      <line x1="10" y1="100" x2="210" y2="100" stroke="#241430" stroke-width="1.5" />
      <line x1="10" y1="10" x2="10" y2="100" stroke="#241430" stroke-width="1.5" />
      <line x1="10" y1="100" x2="10" y2="103" stroke="#241430" stroke-width="1.5" />
      <line x1="110" y1="100" x2="110" y2="103" stroke="#241430" stroke-width="1.5" />
      <line x1="210" y1="100" x2="210" y2="103" stroke="#241430" stroke-width="1.5" />
      <text x="10" y="114" font-size="9" fill="#241430" text-anchor="middle">0 pts</text>
      <text x="110" y="114" font-size="9" fill="#241430" text-anchor="middle">50 pts</text>
      <text x="210" y="114" font-size="9" fill="#241430" text-anchor="middle">100 pts</text>
      
  </svg>
</figure>
<style>
.histogram__caption { font: 600 13px/1.4 system-ui, sans-serif; color: #241430; margin-bottom: 6px; text-transform: capitalize; }
.histogram__chart { display: block; width: 100%; height: auto; }
.histogram__bars { display: none; }
.histogram--normal .histogram__bars--normal,
.histogram--skewed .histogram__bars--skewed,
.histogram--uniform .histogram__bars--uniform { display: block; }
</style>

tailwind

<figure class="histogram-tw histogram-tw--normal max-w-[320px] m-0">
  <figcaption class="font-semibold text-[13px] text-[#241430] mb-1.5 capitalize">Score distribution &mdash; normal shape</figcaption>
  <svg class="block w-full h-auto" viewBox="0 0 220 122" role="img" aria-label="Histogram of scores, normal distribution shape, ten bins from 0 to 100 points">
    <g class="histogram-tw__bars histogram-tw__bars--normal">
      <rect class="histogram-tw__bar" x="10" y="95.7" width="18" height="4.3" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="30" y="87.2" width="18" height="12.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="50" y="74.5" width="18" height="25.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="70" y="53.2" width="18" height="46.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="90" y="32" width="18" height="68" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="110" y="19.2" width="18" height="80.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="130" y="32" width="18" height="68" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="150" y="53.2" width="18" height="46.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="170" y="74.5" width="18" height="25.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="190" y="91.5" width="18" height="8.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
    </g>
    <g class="histogram-tw__bars histogram-tw__bars--skewed">
      <rect class="histogram-tw__bar" x="10" y="23.5" width="18" height="76.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="30" y="40.5" width="18" height="59.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="50" y="57.5" width="18" height="42.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="70" y="70.2" width="18" height="29.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="90" y="81.3" width="18" height="18.7" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="110" y="88.1" width="18" height="11.9" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="130" y="92.4" width="18" height="7.6" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="150" y="94.9" width="18" height="5.1" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="170" y="96.6" width="18" height="3.4" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="190" y="98.3" width="18" height="1.7" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
    </g>
    <g class="histogram-tw__bars histogram-tw__bars--uniform">
      <rect class="histogram-tw__bar" x="10" y="61.7" width="18" height="38.3" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="30" y="57.5" width="18" height="42.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="50" y="59.2" width="18" height="40.8" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="70" y="55.8" width="18" height="44.2" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="90" y="60.1" width="18" height="39.9" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="110" y="55" width="18" height="45" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="130" y="58.4" width="18" height="41.6" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="150" y="56.6" width="18" height="43.4" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="170" y="60.9" width="18" height="39.1" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
      <rect class="histogram-tw__bar" x="190" y="57.5" width="18" height="42.5" fill="#D9C8F0" stroke="#FAF7F2" stroke-width="1" />
    </g>
    
      <line x1="10" y1="100" x2="210" y2="100" stroke="#241430" stroke-width="1.5" />
      <line x1="10" y1="10" x2="10" y2="100" stroke="#241430" stroke-width="1.5" />
      <line x1="10" y1="100" x2="10" y2="103" stroke="#241430" stroke-width="1.5" />
      <line x1="110" y1="100" x2="110" y2="103" stroke="#241430" stroke-width="1.5" />
      <line x1="210" y1="100" x2="210" y2="103" stroke="#241430" stroke-width="1.5" />
      <text x="10" y="114" font-size="9" fill="#241430" text-anchor="middle">0 pts</text>
      <text x="110" y="114" font-size="9" fill="#241430" text-anchor="middle">50 pts</text>
      <text x="210" y="114" font-size="9" fill="#241430" text-anchor="middle">100 pts</text>
      
  </svg>
</figure>
<style>
.histogram-tw__bars { display: none; }
.histogram-tw--normal .histogram-tw__bars--normal,
.histogram-tw--skewed .histogram-tw__bars--skewed,
.histogram-tw--uniform .histogram-tw__bars--uniform { display: block; }
</style>

react

export function Histogram({
  shape = "normal",
  accent = "#D9C8F0",
  showAxis = true,
  barGap = 1,
}) {
  const normalBars = [{ x: 10, y: 95.7, h: 4.3 }, { x: 30, y: 87.2, h: 12.8 }, { x: 50, y: 74.5, h: 25.5 }, { x: 70, y: 53.2, h: 46.8 }, { x: 90, y: 32, h: 68 }, { x: 110, y: 19.2, h: 80.8 }, { x: 130, y: 32, h: 68 }, { x: 150, y: 53.2, h: 46.8 }, { x: 170, y: 74.5, h: 25.5 }, { x: 190, y: 91.5, h: 8.5 }];
  const skewedBars = [{ x: 10, y: 23.5, h: 76.5 }, { x: 30, y: 40.5, h: 59.5 }, { x: 50, y: 57.5, h: 42.5 }, { x: 70, y: 70.2, h: 29.8 }, { x: 90, y: 81.3, h: 18.7 }, { x: 110, y: 88.1, h: 11.9 }, { x: 130, y: 92.4, h: 7.6 }, { x: 150, y: 94.9, h: 5.1 }, { x: 170, y: 96.6, h: 3.4 }, { x: 190, y: 98.3, h: 1.7 }];
  const uniformBars = [{ x: 10, y: 61.7, h: 38.3 }, { x: 30, y: 57.5, h: 42.5 }, { x: 50, y: 59.2, h: 40.8 }, { x: 70, y: 55.8, h: 44.2 }, { x: 90, y: 60.1, h: 39.9 }, { x: 110, y: 55, h: 45 }, { x: 130, y: 58.4, h: 41.6 }, { x: 150, y: 56.6, h: 43.4 }, { x: 170, y: 60.9, h: 39.1 }, { x: 190, y: 57.5, h: 42.5 }];
  const sets = { normal: normalBars, skewed: skewedBars, uniform: uniformBars };
  const bars = sets[shape] ?? normalBars;
  return (
    <figure style={{ maxWidth: 320, margin: 0 }}>
      <figcaption style={{ font: "600 13px/1.4 system-ui, sans-serif", color: "#241430", marginBottom: 6, textTransform: "capitalize" }}>
        Score distribution &mdash; {shape} shape
      </figcaption>
      <svg viewBox="0 0 220 122" role="img" aria-label={`Histogram of scores, ${shape} distribution shape, ten bins from 0 to 100 points`}
        style={{ display: "block", width: "100%", height: "auto" }}>
        <g>
          {bars.map((b, i) => (
            <rect key={i} x={b.x} y={b.y} width={18} height={b.h} fill={accent} stroke="#FAF7F2" strokeWidth={barGap} />
          ))}
        </g>
        {showAxis && (
          <g>
            <line x1={10} y1={100} x2={210} y2={100} stroke="#241430" strokeWidth={1.5} />
            <line x1={10} y1={10} x2={10} y2={100} stroke="#241430" strokeWidth={1.5} />
            <line x1={10} y1={100} x2={10} y2={103} stroke="#241430" strokeWidth={1.5} />
            <line x1={110} y1={100} x2={110} y2={103} stroke="#241430" strokeWidth={1.5} />
            <line x1={210} y1={100} x2={210} y2={103} stroke="#241430" strokeWidth={1.5} />
            <text x={10} y={114} fontSize={9} fill="#241430" textAnchor="middle">0 pts</text>
            <text x={110} y={114} fontSize={9} fill="#241430" textAnchor="middle">50 pts</text>
            <text x={210} y={114} fontSize={9} fill="#241430" textAnchor="middle">100 pts</text>
          </g>
        )}
      </svg>
    </figure>
  );
}