Skip to content
← Histogram
Edit Histogram
Name
Also known as (comma separated)
Brief definition
Distribution chart.
Notes
Tier
Core
Useful
Reference
Deleted
Controls schema (JSON array)
[ { "id": "shape", "type": "select", "label": "Distribution shape", "default": "normal", "options": [ "normal", "skewed", "uniform" ] }, { "id": "accent", "type": "color", "label": "Bar colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] }, { "id": "showAxis", "type": "toggle", "label": "Show axis", "default": true }, { "id": "barGap", "type": "number", "label": "Bar gap", "default": 1, "min": 0, "max": 6, "step": 1 } ]
Templates (JSON object keyed by format)
{ "html": "<figure class=\"histogram histogram--{{shape}}\" style=\"max-width:320px;margin:0;\">\n <figcaption class=\"histogram__caption\">Score distribution — {{shape}} shape</figcaption>\n <svg class=\"histogram__chart\" viewBox=\"0 0 220 122\" role=\"img\" aria-label=\"Histogram of scores, {{shape}} distribution shape, ten bins from 0 to 100 points\">\n <g class=\"histogram__bars histogram__bars--normal\">\n <rect class=\"histogram__bar\" x=\"10\" y=\"95.7\" width=\"18\" height=\"4.3\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"30\" y=\"87.2\" width=\"18\" height=\"12.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"50\" y=\"74.5\" width=\"18\" height=\"25.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"70\" y=\"53.2\" width=\"18\" height=\"46.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"90\" y=\"32\" width=\"18\" height=\"68\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"110\" y=\"19.2\" width=\"18\" height=\"80.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"130\" y=\"32\" width=\"18\" height=\"68\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"150\" y=\"53.2\" width=\"18\" height=\"46.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"170\" y=\"74.5\" width=\"18\" height=\"25.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"190\" y=\"91.5\" width=\"18\" height=\"8.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n </g>\n <g class=\"histogram__bars histogram__bars--skewed\">\n <rect class=\"histogram__bar\" x=\"10\" y=\"23.5\" width=\"18\" height=\"76.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"30\" y=\"40.5\" width=\"18\" height=\"59.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"50\" y=\"57.5\" width=\"18\" height=\"42.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"70\" y=\"70.2\" width=\"18\" height=\"29.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"90\" y=\"81.3\" width=\"18\" height=\"18.7\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"110\" y=\"88.1\" width=\"18\" height=\"11.9\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"130\" y=\"92.4\" width=\"18\" height=\"7.6\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"150\" y=\"94.9\" width=\"18\" height=\"5.1\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"170\" y=\"96.6\" width=\"18\" height=\"3.4\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"190\" y=\"98.3\" width=\"18\" height=\"1.7\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n </g>\n <g class=\"histogram__bars histogram__bars--uniform\">\n <rect class=\"histogram__bar\" x=\"10\" y=\"61.7\" width=\"18\" height=\"38.3\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"30\" y=\"57.5\" width=\"18\" height=\"42.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"50\" y=\"59.2\" width=\"18\" height=\"40.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"70\" y=\"55.8\" width=\"18\" height=\"44.2\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"90\" y=\"60.1\" width=\"18\" height=\"39.9\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"110\" y=\"55\" width=\"18\" height=\"45\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"130\" y=\"58.4\" width=\"18\" height=\"41.6\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"150\" y=\"56.6\" width=\"18\" height=\"43.4\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"170\" y=\"60.9\" width=\"18\" height=\"39.1\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram__bar\" x=\"190\" y=\"57.5\" width=\"18\" height=\"42.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n </g>\n {{#if showAxis}}\n <line x1=\"10\" y1=\"100\" x2=\"210\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"10\" y1=\"10\" x2=\"10\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"10\" y1=\"100\" x2=\"10\" y2=\"103\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"110\" y1=\"100\" x2=\"110\" y2=\"103\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"210\" y1=\"100\" x2=\"210\" y2=\"103\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <text x=\"10\" y=\"114\" font-size=\"9\" fill=\"#241430\" text-anchor=\"middle\">0 pts</text>\n <text x=\"110\" y=\"114\" font-size=\"9\" fill=\"#241430\" text-anchor=\"middle\">50 pts</text>\n <text x=\"210\" y=\"114\" font-size=\"9\" fill=\"#241430\" text-anchor=\"middle\">100 pts</text>\n {{/if}}\n </svg>\n</figure>\n<style>\n.histogram__caption { font: 600 13px/1.4 system-ui, sans-serif; color: #241430; margin-bottom: 6px; text-transform: capitalize; }\n.histogram__chart { display: block; width: 100%; height: auto; }\n.histogram__bars { display: none; }\n.histogram--normal .histogram__bars--normal,\n.histogram--skewed .histogram__bars--skewed,\n.histogram--uniform .histogram__bars--uniform { display: block; }\n</style>", "tailwind": "<figure class=\"histogram-tw histogram-tw--{{shape}} max-w-[320px] m-0\">\n <figcaption class=\"font-semibold text-[13px] text-[#241430] mb-1.5 capitalize\">Score distribution — {{shape}} shape</figcaption>\n <svg class=\"block w-full h-auto\" viewBox=\"0 0 220 122\" role=\"img\" aria-label=\"Histogram of scores, {{shape}} distribution shape, ten bins from 0 to 100 points\">\n <g class=\"histogram-tw__bars histogram-tw__bars--normal\">\n <rect class=\"histogram-tw__bar\" x=\"10\" y=\"95.7\" width=\"18\" height=\"4.3\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"30\" y=\"87.2\" width=\"18\" height=\"12.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"50\" y=\"74.5\" width=\"18\" height=\"25.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"70\" y=\"53.2\" width=\"18\" height=\"46.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"90\" y=\"32\" width=\"18\" height=\"68\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"110\" y=\"19.2\" width=\"18\" height=\"80.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"130\" y=\"32\" width=\"18\" height=\"68\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"150\" y=\"53.2\" width=\"18\" height=\"46.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"170\" y=\"74.5\" width=\"18\" height=\"25.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"190\" y=\"91.5\" width=\"18\" height=\"8.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n </g>\n <g class=\"histogram-tw__bars histogram-tw__bars--skewed\">\n <rect class=\"histogram-tw__bar\" x=\"10\" y=\"23.5\" width=\"18\" height=\"76.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"30\" y=\"40.5\" width=\"18\" height=\"59.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"50\" y=\"57.5\" width=\"18\" height=\"42.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"70\" y=\"70.2\" width=\"18\" height=\"29.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"90\" y=\"81.3\" width=\"18\" height=\"18.7\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"110\" y=\"88.1\" width=\"18\" height=\"11.9\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"130\" y=\"92.4\" width=\"18\" height=\"7.6\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"150\" y=\"94.9\" width=\"18\" height=\"5.1\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"170\" y=\"96.6\" width=\"18\" height=\"3.4\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"190\" y=\"98.3\" width=\"18\" height=\"1.7\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n </g>\n <g class=\"histogram-tw__bars histogram-tw__bars--uniform\">\n <rect class=\"histogram-tw__bar\" x=\"10\" y=\"61.7\" width=\"18\" height=\"38.3\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"30\" y=\"57.5\" width=\"18\" height=\"42.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"50\" y=\"59.2\" width=\"18\" height=\"40.8\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"70\" y=\"55.8\" width=\"18\" height=\"44.2\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"90\" y=\"60.1\" width=\"18\" height=\"39.9\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"110\" y=\"55\" width=\"18\" height=\"45\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"130\" y=\"58.4\" width=\"18\" height=\"41.6\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"150\" y=\"56.6\" width=\"18\" height=\"43.4\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"170\" y=\"60.9\" width=\"18\" height=\"39.1\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n <rect class=\"histogram-tw__bar\" x=\"190\" y=\"57.5\" width=\"18\" height=\"42.5\" fill=\"{{accent}}\" stroke=\"#FAF7F2\" stroke-width=\"{{barGap}}\" />\n </g>\n {{#if showAxis}}\n <line x1=\"10\" y1=\"100\" x2=\"210\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"10\" y1=\"10\" x2=\"10\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"10\" y1=\"100\" x2=\"10\" y2=\"103\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"110\" y1=\"100\" x2=\"110\" y2=\"103\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"210\" y1=\"100\" x2=\"210\" y2=\"103\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <text x=\"10\" y=\"114\" font-size=\"9\" fill=\"#241430\" text-anchor=\"middle\">0 pts</text>\n <text x=\"110\" y=\"114\" font-size=\"9\" fill=\"#241430\" text-anchor=\"middle\">50 pts</text>\n <text x=\"210\" y=\"114\" font-size=\"9\" fill=\"#241430\" text-anchor=\"middle\">100 pts</text>\n {{/if}}\n </svg>\n</figure>\n<style>\n.histogram-tw__bars { display: none; }\n.histogram-tw--normal .histogram-tw__bars--normal,\n.histogram-tw--skewed .histogram-tw__bars--skewed,\n.histogram-tw--uniform .histogram-tw__bars--uniform { display: block; }\n</style>", "react": "export function Histogram({\n shape = \"{{shape}}\",\n accent = \"{{accent}}\",\n showAxis = {{showAxis}},\n barGap = {{barGap}},\n}) {\n 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 }];\n 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 }];\n 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 }];\n const sets = { normal: normalBars, skewed: skewedBars, uniform: uniformBars };\n const bars = sets[shape] ?? normalBars;\n return (\n <figure style={{ maxWidth: 320, margin: 0 }}>\n <figcaption style={{ font: \"600 13px/1.4 system-ui, sans-serif\", color: \"#241430\", marginBottom: 6, textTransform: \"capitalize\" }}>\n Score distribution — {shape} shape\n </figcaption>\n <svg viewBox=\"0 0 220 122\" role=\"img\" aria-label={`Histogram of scores, ${shape} distribution shape, ten bins from 0 to 100 points`}\n style={{ display: \"block\", width: \"100%\", height: \"auto\" }}>\n <g>\n {bars.map((b, i) => (\n <rect key={i} x={b.x} y={b.y} width={18} height={b.h} fill={accent} stroke=\"#FAF7F2\" strokeWidth={barGap} />\n ))}\n </g>\n {showAxis && (\n <g>\n <line x1={10} y1={100} x2={210} y2={100} stroke=\"#241430\" strokeWidth={1.5} />\n <line x1={10} y1={10} x2={10} y2={100} stroke=\"#241430\" strokeWidth={1.5} />\n <line x1={10} y1={100} x2={10} y2={103} stroke=\"#241430\" strokeWidth={1.5} />\n <line x1={110} y1={100} x2={110} y2={103} stroke=\"#241430\" strokeWidth={1.5} />\n <line x1={210} y1={100} x2={210} y2={103} stroke=\"#241430\" strokeWidth={1.5} />\n <text x={10} y={114} fontSize={9} fill=\"#241430\" textAnchor=\"middle\">0 pts</text>\n <text x={110} y={114} fontSize={9} fill=\"#241430\" textAnchor=\"middle\">50 pts</text>\n <text x={210} y={114} fontSize={9} fill=\"#241430\" textAnchor=\"middle\">100 pts</text>\n </g>\n )}\n </svg>\n </figure>\n );\n}" }
Save
History