Edit Axis

Name

Also known as (comma separated)

Brief definition Measurement scale.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "tickCount", "type": "select", "label": "Tick count", "default": "5", "options": [ "3", "5", "7" ] }, { "id": "rotation", "type": "number", "label": "Label rotation (deg)", "default": 0, "min": -90, "max": 90, "step": 15 }, { "id": "unit", "type": "text", "label": "Unit suffix", "default": "$" }, { "id": "orientation", "type": "select", "label": "Orientation", "default": "horizontal", "options": [ "horizontal", "vertical" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"axis-demo axis-demo--{{orientation}} axis-demo--ticks-{{tickCount}}\">\n <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 {{unit}}\">\n <line x1=\"20\" y1=\"4\" x2=\"320\" y2=\"4\" class=\"axis-demo__line\" />\n <g class=\"axis-demo__ticks\">\n <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({{rotation}}deg);\">0{{unit}}</text></g>\n <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({{rotation}}deg);\">50{{unit}}</text></g>\n <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({{rotation}}deg);\">100{{unit}}</text></g>\n <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({{rotation}}deg);\">150{{unit}}</text></g>\n <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({{rotation}}deg);\">200{{unit}}</text></g>\n <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({{rotation}}deg);\">250{{unit}}</text></g>\n <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({{rotation}}deg);\">300{{unit}}</text></g>\n </g>\n </svg>\n <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 {{unit}}\">\n <line x1=\"30\" y1=\"0\" x2=\"30\" y2=\"100\" class=\"axis-demo__line\" />\n <g class=\"axis-demo__ticks\" transform=\"translate(30,0)\">\n <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({{rotation}}deg);\">300{{unit}}</text></g>\n <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({{rotation}}deg);\">250{{unit}}</text></g>\n <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({{rotation}}deg);\">200{{unit}}</text></g>\n <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({{rotation}}deg);\">150{{unit}}</text></g>\n <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({{rotation}}deg);\">100{{unit}}</text></g>\n <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({{rotation}}deg);\">50{{unit}}</text></g>\n <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({{rotation}}deg);\">0{{unit}}</text></g>\n </g>\n </svg>\n</div>\n<style>\n.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; }\n.axis-demo__svg { display: none; overflow: visible; }\n.axis-demo__svg--horizontal { width: 100%; }\n.axis-demo__svg--vertical { height: 140px; }\n.axis-demo--horizontal .axis-demo__svg--horizontal { display: block; }\n.axis-demo--vertical .axis-demo__svg--vertical { display: block; }\n.axis-demo__line { stroke: #24143055; stroke-width: 1.5; }\n.axis-demo__mark { stroke: #24143055; stroke-width: 1.5; }\n.axis-demo__label { font-size: 9px; fill: #24143099; text-anchor: middle; }\n.axis-demo__label--v { text-anchor: end; }\n.axis-demo--ticks-5 .axis-demo__ticks .axis-demo__tick:nth-child(2),\n.axis-demo--ticks-5 .axis-demo__ticks .axis-demo__tick:nth-child(6) { display: none; }\n.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(2),\n.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(3),\n.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(5),\n.axis-demo--ticks-3 .axis-demo__ticks .axis-demo__tick:nth-child(6) { display: none; }\n</style>", "tailwind": "<div class=\"axis-tw axis-tw--{{orientation}} axis-tw--ticks-{{tickCount}} max-w-[640px] p-4 border-[1.5px] border-[#24143022] rounded-xl box-border font-sans text-[#241430] bg-[#FAF7F2]\">\n <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 {{unit}}\">\n <line x1=\"20\" y1=\"4\" x2=\"320\" y2=\"4\" stroke=\"#24143055\" stroke-width=\"1.5\" />\n <g class=\"axis-tw__ticks\">\n <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({{rotation}}deg);\">0{{unit}}</text></g>\n <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({{rotation}}deg);\">50{{unit}}</text></g>\n <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({{rotation}}deg);\">100{{unit}}</text></g>\n <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({{rotation}}deg);\">150{{unit}}</text></g>\n <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({{rotation}}deg);\">200{{unit}}</text></g>\n <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({{rotation}}deg);\">250{{unit}}</text></g>\n <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({{rotation}}deg);\">300{{unit}}</text></g>\n </g>\n </svg>\n <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 {{unit}}\">\n <line x1=\"30\" y1=\"0\" x2=\"30\" y2=\"100\" stroke=\"#24143055\" stroke-width=\"1.5\" />\n <g class=\"axis-tw__ticks\" transform=\"translate(30,0)\">\n <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({{rotation}}deg);\">300{{unit}}</text></g>\n <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({{rotation}}deg);\">250{{unit}}</text></g>\n <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({{rotation}}deg);\">200{{unit}}</text></g>\n <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({{rotation}}deg);\">150{{unit}}</text></g>\n <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({{rotation}}deg);\">100{{unit}}</text></g>\n <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({{rotation}}deg);\">50{{unit}}</text></g>\n <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({{rotation}}deg);\">0{{unit}}</text></g>\n </g>\n </svg>\n</div>\n<style>\n.axis-tw__svg { display: none; }\n.axis-tw--horizontal .axis-tw__svg--horizontal { display: block; }\n.axis-tw--vertical .axis-tw__svg--vertical { display: block; }\n.axis-tw__ticks .axis-demo__label, .axis-tw__ticks text { font-size: 9px; fill: #24143099; text-anchor: middle; }\n.axis-tw__svg--vertical .axis-tw__ticks text { text-anchor: end; }\n.axis-tw__ticks line.axis-demo__mark, .axis-tw__ticks line { stroke: #24143055; stroke-width: 1.5; }\n.axis-tw--ticks-5 .axis-tw__ticks .axis-demo__tick:nth-child(2),\n.axis-tw--ticks-5 .axis-tw__ticks .axis-demo__tick:nth-child(6) { display: none; }\n.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(2),\n.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(3),\n.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(5),\n.axis-tw--ticks-3 .axis-tw__ticks .axis-demo__tick:nth-child(6) { display: none; }\n</style>", "react": "export function Axis({\n tickCount = \"{{tickCount}}\",\n rotation = {{rotation}},\n unit = \"{{unit}}\",\n orientation = \"{{orientation}}\",\n}) {\n const values = [0, 50, 100, 150, 200, 250, 300];\n const keepSets = {\n \"7\": [0, 1, 2, 3, 4, 5, 6],\n \"5\": [0, 2, 3, 4, 6],\n \"3\": [0, 3, 6],\n };\n const keep = keepSets[tickCount] ?? keepSets[\"7\"];\n const labelStyle = { fontSize: 9, fill: \"#24143099\", transformBox: \"fit-content\", transformOrigin: \"center\", transform: \"rotate(\" + rotation + \"deg)\" };\n return (\n <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 }}>\n {orientation === \"horizontal\" ? (\n <svg viewBox=\"0 0 340 40\" style={{ width: \"100%\", overflow: \"visible\" }} role=\"img\" aria-label={\"Horizontal axis with tick marks in units of \" + unit}>\n <line x1=\"20\" y1=\"4\" x2=\"320\" y2=\"4\" stroke=\"#24143055\" strokeWidth=\"1.5\" />\n {values.map((v, i) => keep.includes(i) && (\n <g key={v}>\n <line x1={20 + i * 50} x2={20 + i * 50} y1=\"4\" y2=\"10\" stroke=\"#24143055\" strokeWidth=\"1.5\" />\n <text x={20 + i * 50} y=\"24\" textAnchor=\"middle\" style={labelStyle}>{v}{unit}</text>\n </g>\n ))}\n </svg>\n ) : (\n <svg viewBox=\"0 0 60 110\" style={{ height: 140, overflow: \"visible\" }} role=\"img\" aria-label={\"Vertical axis with tick marks in units of \" + unit}>\n <line x1=\"30\" y1=\"0\" x2=\"30\" y2=\"100\" stroke=\"#24143055\" strokeWidth=\"1.5\" />\n {values.slice().reverse().map((v, i) => keep.includes(values.length - 1 - i) && (\n <g key={v} transform=\"translate(30,0)\">\n <line x1=\"0\" x2=\"-6\" y1={10 + i * 15} y2={10 + i * 15} stroke=\"#24143055\" strokeWidth=\"1.5\" />\n <text x=\"-10\" y={10 + i * 15 + 3} textAnchor=\"end\" style={labelStyle}>{v}{unit}</text>\n </g>\n ))}\n </svg>\n )}\n </div>\n );\n}" }