Edit Radar Chart

Name

Also known as (comma separated)

Brief definition Multi-axis radial comparison.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "profile", "type": "select", "label": "Profile", "default": "balanced", "options": [ "balanced", "specialised" ] }, { "id": "showGrid", "type": "toggle", "label": "Show gridlines", "default": true }, { "id": "showValues", "type": "toggle", "label": "Show value labels", "default": true }, { "id": "strokeWidth", "type": "number", "label": "Line thickness", "default": 2, "min": 1, "max": 5, "step": 0.5 }, { "id": "accent", "type": "color", "label": "Colour", "default": "#D9C8F0", "presets": [ "#D9C8F0", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"radar-chart radar-chart--{{profile}} {{#if showGrid}}radar-chart--grid{{/if}} {{#if showValues}}radar-chart--values{{/if}}\" style=\"--accent:{{accent}};--sw:{{strokeWidth}};\">\n <svg class=\"radar-chart__svg\" viewBox=\"0 0 140 135\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Radar chart of a {{profile}} profile across 5 metrics: speed, quality, cost, reach and ease\">\n <g class=\"rc-gridwrap\">\n <polygon class=\"rc-grid\" points=\"70,15 122.3,53 102.3,114.5 37.7,114.5 17.7,53\"></polygon>\n <polygon class=\"rc-grid\" points=\"70,42.5 96.15,61.5 86.15,92.25 53.85,92.25 43.85,61.5\"></polygon>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"70\" y2=\"15\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"122.3\" y2=\"53\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"102.3\" y2=\"114.5\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"37.7\" y2=\"114.5\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"17.7\" y2=\"53\"></line>\n </g>\n \n <text class=\"rc-axis-label\" x=\"70\" y=\"8\">Speed</text>\n <text class=\"rc-axis-label\" x=\"131.8\" y=\"49.9\">Quality</text>\n <text class=\"rc-axis-label\" x=\"108.2\" y=\"126\">Cost</text>\n <text class=\"rc-axis-label\" x=\"31.8\" y=\"126\">Reach</text>\n <text class=\"rc-axis-label\" x=\"8.2\" y=\"49.9\">Ease</text>\n <polygon class=\"rc-poly rc-poly--balanced\" points=\"70,31.5 104,58.95 94.25,103.37 48.01,100.26 32.34,57.76\"></polygon>\n <polygon class=\"rc-poly rc-poly--specialised\" points=\"70,17.75 90.92,63.2 79.70,83.35 42.51,107.82 46.47,62.35\"></polygon>\n <text class=\"rc-value rc-value--balanced\" x=\"70\" y=\"20\">70</text>\n <text class=\"rc-value rc-value--balanced\" x=\"112\" y=\"55\">65</text>\n <text class=\"rc-value rc-value--balanced\" x=\"100\" y=\"110\">75</text>\n <text class=\"rc-value rc-value--balanced\" x=\"40\" y=\"107\">68</text>\n <text class=\"rc-value rc-value--balanced\" x=\"24\" y=\"55\">72</text>\n <text class=\"rc-value rc-value--specialised\" x=\"70\" y=\"6\">95</text>\n <text class=\"rc-value rc-value--specialised\" x=\"98\" y=\"60\">40</text>\n <text class=\"rc-value rc-value--specialised\" x=\"82\" y=\"90\">30</text>\n <text class=\"rc-value rc-value--specialised\" x=\"34\" y=\"114\">85</text>\n <text class=\"rc-value rc-value--specialised\" x=\"36\" y=\"58\">45</text>\n </svg>\n <div class=\"rc-srtable-wrap rc-srtable-wrap--balanced\">\n <table class=\"radar-chart__srtable\">\n <caption>Balanced profile scores out of 100</caption>\n <thead><tr><th scope=\"col\">Metric</th><th scope=\"col\">Score</th></tr></thead>\n <tbody>\n <tr><td>Speed</td><td>70</td></tr>\n <tr><td>Quality</td><td>65</td></tr>\n <tr><td>Cost</td><td>75</td></tr>\n <tr><td>Reach</td><td>68</td></tr>\n <tr><td>Ease</td><td>72</td></tr>\n </tbody>\n </table></div>\n <div class=\"rc-srtable-wrap rc-srtable-wrap--specialised\">\n <table class=\"radar-chart__srtable\">\n <caption>Specialised profile scores out of 100</caption>\n <thead><tr><th scope=\"col\">Metric</th><th scope=\"col\">Score</th></tr></thead>\n <tbody>\n <tr><td>Speed</td><td>95</td></tr>\n <tr><td>Quality</td><td>40</td></tr>\n <tr><td>Cost</td><td>30</td></tr>\n <tr><td>Reach</td><td>85</td></tr>\n <tr><td>Ease</td><td>45</td></tr>\n </tbody>\n </table></div>\n</div>\n<style>\n.radar-chart { max-width: 320px; font: 11px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }\n.radar-chart__svg { width: 100%; height: auto; display: block; }\n.radar-chart .rc-grid { fill: none; stroke: #24143022; stroke-width: 1; }\n.radar-chart .rc-spoke { stroke: #24143022; stroke-width: 1; }\n.radar-chart .rc-gridwrap { display: none; }\n.radar-chart--grid .rc-gridwrap { display: block; }\n.radar-chart .rc-axis-label { font-size: 8.5px; fill: #241430; text-anchor: middle; font-weight: 600; }\n.radar-chart .rc-poly { fill: var(--accent); fill-opacity: .38; stroke: var(--accent); stroke-width: var(--sw); stroke-linejoin: round; display: none; }\n.radar-chart--balanced .rc-poly--balanced { display: block; }\n.radar-chart--specialised .rc-poly--specialised { display: block; }\n.radar-chart .rc-value { font-size: 7.5px; fill: #241430; text-anchor: middle; font-weight: 700; display: none; }\n.radar-chart--balanced.radar-chart--values .rc-value--balanced { display: block; }\n.radar-chart--specialised.radar-chart--values .rc-value--specialised { display: block; }\n.radar-chart .rc-srtable-wrap { display: none; }\n.radar-chart--balanced .rc-srtable-wrap--balanced { display: block; }\n.radar-chart--specialised .rc-srtable-wrap--specialised { display: block; }\n.radar-chart .rc-srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n</style>", "tailwind": "<div class=\"radar-chart-tw radar-chart-tw--{{profile}} {{#if showGrid}}radar-chart-tw--grid{{/if}} {{#if showValues}}radar-chart-tw--values{{/if}}\" style=\"--accent:{{accent}};--sw:{{strokeWidth}};\">\n <svg class=\"radar-chart-tw__svg\" viewBox=\"0 0 140 135\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\" aria-label=\"Radar chart of a {{profile}} profile across 5 metrics: speed, quality, cost, reach and ease\">\n <g class=\"rc-gridwrap\">\n <polygon class=\"rc-grid\" points=\"70,15 122.3,53 102.3,114.5 37.7,114.5 17.7,53\"></polygon>\n <polygon class=\"rc-grid\" points=\"70,42.5 96.15,61.5 86.15,92.25 53.85,92.25 43.85,61.5\"></polygon>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"70\" y2=\"15\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"122.3\" y2=\"53\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"102.3\" y2=\"114.5\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"37.7\" y2=\"114.5\"></line>\n <line class=\"rc-spoke\" x1=\"70\" y1=\"70\" x2=\"17.7\" y2=\"53\"></line>\n </g>\n \n <text class=\"rc-axis-label\" x=\"70\" y=\"8\">Speed</text>\n <text class=\"rc-axis-label\" x=\"131.8\" y=\"49.9\">Quality</text>\n <text class=\"rc-axis-label\" x=\"108.2\" y=\"126\">Cost</text>\n <text class=\"rc-axis-label\" x=\"31.8\" y=\"126\">Reach</text>\n <text class=\"rc-axis-label\" x=\"8.2\" y=\"49.9\">Ease</text>\n <polygon class=\"rc-poly rc-poly--balanced\" points=\"70,31.5 104,58.95 94.25,103.37 48.01,100.26 32.34,57.76\"></polygon>\n <polygon class=\"rc-poly rc-poly--specialised\" points=\"70,17.75 90.92,63.2 79.70,83.35 42.51,107.82 46.47,62.35\"></polygon>\n <text class=\"rc-value rc-value--balanced\" x=\"70\" y=\"20\">70</text>\n <text class=\"rc-value rc-value--balanced\" x=\"112\" y=\"55\">65</text>\n <text class=\"rc-value rc-value--balanced\" x=\"100\" y=\"110\">75</text>\n <text class=\"rc-value rc-value--balanced\" x=\"40\" y=\"107\">68</text>\n <text class=\"rc-value rc-value--balanced\" x=\"24\" y=\"55\">72</text>\n <text class=\"rc-value rc-value--specialised\" x=\"70\" y=\"6\">95</text>\n <text class=\"rc-value rc-value--specialised\" x=\"98\" y=\"60\">40</text>\n <text class=\"rc-value rc-value--specialised\" x=\"82\" y=\"90\">30</text>\n <text class=\"rc-value rc-value--specialised\" x=\"34\" y=\"114\">85</text>\n <text class=\"rc-value rc-value--specialised\" x=\"36\" y=\"58\">45</text>\n </svg>\n <div class=\"rc-srtable-wrap rc-srtable-wrap--balanced\">\n <table class=\"radar-chart-tw__srtable\">\n <caption>Balanced profile scores out of 100</caption>\n <thead><tr><th scope=\"col\">Metric</th><th scope=\"col\">Score</th></tr></thead>\n <tbody>\n <tr><td>Speed</td><td>70</td></tr>\n <tr><td>Quality</td><td>65</td></tr>\n <tr><td>Cost</td><td>75</td></tr>\n <tr><td>Reach</td><td>68</td></tr>\n <tr><td>Ease</td><td>72</td></tr>\n </tbody>\n </table></div>\n <div class=\"rc-srtable-wrap rc-srtable-wrap--specialised\">\n <table class=\"radar-chart-tw__srtable\">\n <caption>Specialised profile scores out of 100</caption>\n <thead><tr><th scope=\"col\">Metric</th><th scope=\"col\">Score</th></tr></thead>\n <tbody>\n <tr><td>Speed</td><td>95</td></tr>\n <tr><td>Quality</td><td>40</td></tr>\n <tr><td>Cost</td><td>30</td></tr>\n <tr><td>Reach</td><td>85</td></tr>\n <tr><td>Ease</td><td>45</td></tr>\n </tbody>\n </table></div>\n</div>\n<style>\n.radar-chart-tw { max-width: 320px; font: 11px system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 12px; box-sizing: border-box; }\n.radar-chart-tw__svg { width: 100%; height: auto; display: block; }\n.radar-chart-tw .rc-grid { fill: none; stroke: #24143022; stroke-width: 1; }\n.radar-chart-tw .rc-spoke { stroke: #24143022; stroke-width: 1; }\n.radar-chart-tw .rc-gridwrap { display: none; }\n.radar-chart-tw--grid .rc-gridwrap { display: block; }\n.radar-chart-tw .rc-axis-label { font-size: 8.5px; fill: #241430; text-anchor: middle; font-weight: 600; }\n.radar-chart-tw .rc-poly { fill: var(--accent); fill-opacity: .38; stroke: var(--accent); stroke-width: var(--sw); stroke-linejoin: round; display: none; }\n.radar-chart-tw--balanced .rc-poly--balanced { display: block; }\n.radar-chart-tw--specialised .rc-poly--specialised { display: block; }\n.radar-chart-tw .rc-value { font-size: 7.5px; fill: #241430; text-anchor: middle; font-weight: 700; display: none; }\n.radar-chart-tw--balanced.radar-chart-tw--values .rc-value--balanced { display: block; }\n.radar-chart-tw--specialised.radar-chart-tw--values .rc-value--specialised { display: block; }\n.radar-chart-tw .rc-srtable-wrap { display: none; }\n.radar-chart-tw--balanced .rc-srtable-wrap--balanced { display: block; }\n.radar-chart-tw--specialised .rc-srtable-wrap--specialised { display: block; }\n.radar-chart-tw .rc-srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n</style>", "react": "export function RadarChart({\n profile = \"{{profile}}\",\n showGrid = {{showGrid}},\n showValues = {{showValues}},\n strokeWidth = {{strokeWidth}},\n accent = \"{{accent}}\",\n}) {\n const axes = [\n { label: \"Speed\", lx: 70, ly: 8 },\n { label: \"Quality\", lx: 131.8, ly: 49.9 },\n { label: \"Cost\", lx: 108.2, ly: 126 },\n { label: \"Reach\", lx: 31.8, ly: 126 },\n { label: \"Ease\", lx: 8.2, ly: 49.9 },\n ];\n const profiles = {\n balanced: {\n points: \"70,31.5 104,58.95 94.25,103.37 48.01,100.26 32.34,57.76\",\n values: [[\"70\", \"20\", \"70\"], [\"112\", \"55\", \"65\"], [\"100\", \"110\", \"75\"], [\"40\", \"107\", \"68\"], [\"24\", \"55\", \"72\"]],\n caption: \"Balanced profile scores out of 100\",\n },\n specialised: {\n points: \"70,17.75 90.92,63.2 79.70,83.35 42.51,107.82 46.47,62.35\",\n values: [[\"70\", \"6\", \"95\"], [\"98\", \"60\", \"40\"], [\"82\", \"90\", \"30\"], [\"34\", \"114\", \"85\"], [\"36\", \"58\", \"45\"]],\n caption: \"Specialised profile scores out of 100\",\n },\n };\n const active = profiles[profile] ?? profiles.balanced;\n return (\n <div style={{ maxWidth: 320, padding: 12, font: \"11px system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", boxSizing: \"border-box\" }}>\n <svg viewBox=\"0 0 140 135\" style={{ width: \"100%\", height: \"auto\", display: \"block\" }}\n role=\"img\" aria-label={`Radar chart of a ${profile} profile across 5 metrics: speed, quality, cost, reach and ease`}>\n {showGrid && (\n <g fill=\"none\" stroke=\"#24143022\" strokeWidth={1}>\n <polygon points=\"70,15 122.3,53 102.3,114.5 37.7,114.5 17.7,53\" />\n <polygon points=\"70,42.5 96.15,61.5 86.15,92.25 53.85,92.25 43.85,61.5\" />\n {axes.map((a, i) => {\n const outer = [\"70,15\", \"122.3,53\", \"102.3,114.5\", \"37.7,114.5\", \"17.7,53\"][i].split(\",\");\n return <line key={i} x1={70} y1={70} x2={outer[0]} y2={outer[1]} />;\n })}\n </g>\n )}\n {axes.map((a, i) => (\n <text key={i} x={a.lx} y={a.ly} fontSize={8.5} textAnchor=\"middle\" fontWeight={600} fill=\"#241430\">{a.label}</text>\n ))}\n <polygon points={active.points} fill={accent} fillOpacity={0.38} stroke={accent} strokeWidth={strokeWidth} strokeLinejoin=\"round\" />\n {showValues && active.values.map(([x, y, v], i) => (\n <text key={i} x={x} y={y} fontSize={7.5} textAnchor=\"middle\" fontWeight={700} fill=\"#241430\">{v}</text>\n ))}\n </svg>\n </div>\n );\n}" }