Edit Drill-down Chart

Name

Also known as (comma separated)

Brief definition Chart allowing navigation into detailed data.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "category", "type": "text", "label": "First category name", "default": "Marketing" }, { "id": "expanded", "type": "toggle", "label": "Expand first category", "default": true }, { "id": "accent", "type": "color", "label": "Bar colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "subCount", "type": "select", "label": "Sub-rows shown", "default": "3", "options": [ "2", "3" ] }, { "id": "showValues", "type": "toggle", "label": "Show numeric values", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"drilldown\">\n <details class=\"drilldown__row drilldown__row--1\" {{#if expanded}}open{{/if}}>\n <summary class=\"drilldown__summary\">\n <span class=\"drilldown__name\">{{category}}</span>\n <span class=\"drilldown__bar-track\">\n <span class=\"drilldown__bar-fill\" style=\"width:100%;background:{{accent}};\"></span>\n </span>\n {{#if showValues}}<span class=\"drilldown__total\">420</span>{{/if}}\n </summary>\n <ul class=\"drilldown__subs drilldown__subs--{{subCount}}\">\n <li class=\"drilldown__sub drilldown__sub--1\">\n <span class=\"drilldown__sub-bar\" style=\"width:57%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Email</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">240</span>{{/if}}\n </li>\n <li class=\"drilldown__sub drilldown__sub--2\">\n <span class=\"drilldown__sub-bar\" style=\"width:29%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Social</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">120</span>{{/if}}\n </li>\n <li class=\"drilldown__sub drilldown__sub--3\">\n <span class=\"drilldown__sub-bar\" style=\"width:14%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Referral</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">60</span>{{/if}}\n </li>\n </ul>\n </details>\n <details class=\"drilldown__row drilldown__row--2\">\n <summary class=\"drilldown__summary\">\n <span class=\"drilldown__name\">Sales</span>\n <span class=\"drilldown__bar-track\">\n <span class=\"drilldown__bar-fill\" style=\"width:71%;background:{{accent}};\"></span>\n </span>\n {{#if showValues}}<span class=\"drilldown__total\">300</span>{{/if}}\n </summary>\n <ul class=\"drilldown__subs drilldown__subs--{{subCount}}\">\n <li class=\"drilldown__sub drilldown__sub--1\">\n <span class=\"drilldown__sub-bar\" style=\"width:60%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">New</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">180</span>{{/if}}\n </li>\n <li class=\"drilldown__sub drilldown__sub--2\">\n <span class=\"drilldown__sub-bar\" style=\"width:30%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Repeat</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">90</span>{{/if}}\n </li>\n <li class=\"drilldown__sub drilldown__sub--3\">\n <span class=\"drilldown__sub-bar\" style=\"width:10%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Other</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">30</span>{{/if}}\n </li>\n </ul>\n </details>\n <details class=\"drilldown__row drilldown__row--3\">\n <summary class=\"drilldown__summary\">\n <span class=\"drilldown__name\">Support</span>\n <span class=\"drilldown__bar-track\">\n <span class=\"drilldown__bar-fill\" style=\"width:43%;background:{{accent}};\"></span>\n </span>\n {{#if showValues}}<span class=\"drilldown__total\">180</span>{{/if}}\n </summary>\n <ul class=\"drilldown__subs drilldown__subs--{{subCount}}\">\n <li class=\"drilldown__sub drilldown__sub--1\">\n <span class=\"drilldown__sub-bar\" style=\"width:56%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Tickets</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">100</span>{{/if}}\n </li>\n <li class=\"drilldown__sub drilldown__sub--2\">\n <span class=\"drilldown__sub-bar\" style=\"width:33%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Calls</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">60</span>{{/if}}\n </li>\n <li class=\"drilldown__sub drilldown__sub--3\">\n <span class=\"drilldown__sub-bar\" style=\"width:11%;background:{{accent}};\"></span>\n <span class=\"drilldown__sub-name\">Chat</span>\n {{#if showValues}}<span class=\"drilldown__sub-val\">20</span>{{/if}}\n </li>\n </ul>\n </details>\n <table class=\"drilldown__srtable\">\n <caption>Drill-down chart data: category totals with sub-category breakdown</caption>\n <thead><tr><th scope=\"col\">Category</th><th scope=\"col\">Total</th><th scope=\"col\">Sub-category</th><th scope=\"col\">Value</th></tr></thead>\n <tbody>\n <tr><th scope=\"row\" rowspan=\"3\">{{category}}</th><td rowspan=\"3\">420</td><td>Email</td><td>240</td></tr>\n <tr><td>Social</td><td>120</td></tr>\n <tr><td>Referral</td><td>60</td></tr>\n <tr><th scope=\"row\" rowspan=\"3\">Sales</th><td rowspan=\"3\">300</td><td>New</td><td>180</td></tr>\n <tr><td>Repeat</td><td>90</td></tr>\n <tr><td>Other</td><td>30</td></tr>\n <tr><th scope=\"row\" rowspan=\"3\">Support</th><td rowspan=\"3\">180</td><td>Tickets</td><td>100</td></tr>\n <tr><td>Calls</td><td>60</td></tr>\n <tr><td>Chat</td><td>20</td></tr>\n </tbody>\n </table>\n</div>\n<style>\n.drilldown { font: 14px/1.4 system-ui, sans-serif; color: #241430; max-width: 400px; }\n.drilldown__row { border: 1px solid #24143022; border-radius: 8px; margin-bottom: 8px; padding: 8px 10px; }\n.drilldown__summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }\n.drilldown__summary::-webkit-details-marker { display: none; }\n.drilldown__summary::before { content: \"\\25B8\"; flex: none; }\n@media (prefers-reduced-motion: no-preference) {\n.drilldown__summary::before { transition: transform .15s ease; }\n}\n.drilldown__row[open] .drilldown__summary::before { transform: rotate(90deg); }\n.drilldown__name { flex: none; width: 90px; font-weight: 600; }\n.drilldown__bar-track { flex: 1; height: 10px; background: #24143014; border-radius: 5px; overflow: hidden; }\n.drilldown__bar-fill { display: block; height: 100%; border-radius: 5px; }\n.drilldown__total { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; }\n.drilldown__subs { list-style: none; margin: 10px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; }\n.drilldown__sub { display: flex; align-items: center; gap: 8px; font-size: 12px; }\n.drilldown__sub-bar { display: block; height: 6px; width: 0; border-radius: 3px; flex: none; max-width: 90px; }\n.drilldown__sub-name { flex: 1; }\n.drilldown__sub-val { font-variant-numeric: tabular-nums; }\n.drilldown__subs--2 .drilldown__sub--3 { display: none; }\n.drilldown__srtable { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }\n</style>", "tailwind": "<div class=\"drilldown-tw max-w-[400px] font-sans text-sm text-[#241430]\">\n <details class=\"drilldown-tw__row drilldown-tw__row--1\" {{#if expanded}}open{{/if}}>\n <summary class=\"drilldown-tw__summary\">\n <span class=\"drilldown-tw__name\">{{category}}</span>\n <span class=\"drilldown-tw__bar-track\">\n <span class=\"drilldown-tw__bar-fill\" style=\"width:100%;background:{{accent}};\"></span>\n </span>\n {{#if showValues}}<span class=\"drilldown-tw__total\">420</span>{{/if}}\n </summary>\n <ul class=\"drilldown-tw__subs drilldown-tw__subs--{{subCount}}\">\n <li class=\"drilldown-tw__sub drilldown-tw__sub--1\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:57%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Email</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">240</span>{{/if}}\n </li>\n <li class=\"drilldown-tw__sub drilldown-tw__sub--2\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:29%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Social</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">120</span>{{/if}}\n </li>\n <li class=\"drilldown-tw__sub drilldown-tw__sub--3\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:14%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Referral</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">60</span>{{/if}}\n </li>\n </ul>\n </details>\n <details class=\"drilldown-tw__row drilldown-tw__row--2\">\n <summary class=\"drilldown-tw__summary\">\n <span class=\"drilldown-tw__name\">Sales</span>\n <span class=\"drilldown-tw__bar-track\">\n <span class=\"drilldown-tw__bar-fill\" style=\"width:71%;background:{{accent}};\"></span>\n </span>\n {{#if showValues}}<span class=\"drilldown-tw__total\">300</span>{{/if}}\n </summary>\n <ul class=\"drilldown-tw__subs drilldown-tw__subs--{{subCount}}\">\n <li class=\"drilldown-tw__sub drilldown-tw__sub--1\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:60%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">New</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">180</span>{{/if}}\n </li>\n <li class=\"drilldown-tw__sub drilldown-tw__sub--2\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:30%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Repeat</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">90</span>{{/if}}\n </li>\n <li class=\"drilldown-tw__sub drilldown-tw__sub--3\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:10%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Other</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">30</span>{{/if}}\n </li>\n </ul>\n </details>\n <details class=\"drilldown-tw__row drilldown-tw__row--3\">\n <summary class=\"drilldown-tw__summary\">\n <span class=\"drilldown-tw__name\">Support</span>\n <span class=\"drilldown-tw__bar-track\">\n <span class=\"drilldown-tw__bar-fill\" style=\"width:43%;background:{{accent}};\"></span>\n </span>\n {{#if showValues}}<span class=\"drilldown-tw__total\">180</span>{{/if}}\n </summary>\n <ul class=\"drilldown-tw__subs drilldown-tw__subs--{{subCount}}\">\n <li class=\"drilldown-tw__sub drilldown-tw__sub--1\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:56%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Tickets</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">100</span>{{/if}}\n </li>\n <li class=\"drilldown-tw__sub drilldown-tw__sub--2\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:33%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Calls</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">60</span>{{/if}}\n </li>\n <li class=\"drilldown-tw__sub drilldown-tw__sub--3\">\n <span class=\"drilldown-tw__sub-bar\" style=\"width:11%;background:{{accent}};\"></span>\n <span class=\"drilldown-tw__sub-name\">Chat</span>\n {{#if showValues}}<span class=\"drilldown-tw__sub-val\">20</span>{{/if}}\n </li>\n </ul>\n </details>\n <table class=\"absolute w-px h-px overflow-hidden\" style=\"clip:rect(0 0 0 0)\">\n <caption>Drill-down chart data: category totals with sub-category breakdown</caption>\n <thead><tr><th scope=\"col\">Category</th><th scope=\"col\">Total</th><th scope=\"col\">Sub-category</th><th scope=\"col\">Value</th></tr></thead>\n <tbody>\n <tr><th scope=\"row\" rowspan=\"3\">{{category}}</th><td rowspan=\"3\">420</td><td>Email</td><td>240</td></tr>\n <tr><td>Social</td><td>120</td></tr>\n <tr><td>Referral</td><td>60</td></tr>\n <tr><th scope=\"row\" rowspan=\"3\">Sales</th><td rowspan=\"3\">300</td><td>New</td><td>180</td></tr>\n <tr><td>Repeat</td><td>90</td></tr>\n <tr><td>Other</td><td>30</td></tr>\n <tr><th scope=\"row\" rowspan=\"3\">Support</th><td rowspan=\"3\">180</td><td>Tickets</td><td>100</td></tr>\n <tr><td>Calls</td><td>60</td></tr>\n <tr><td>Chat</td><td>20</td></tr>\n </tbody>\n </table>\n</div>\n<style>\n.drilldown-tw__row { border: 1px solid #24143022; border-radius: 8px; margin-bottom: 8px; padding: 8px 10px; }\n.drilldown-tw__summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }\n.drilldown-tw__summary::-webkit-details-marker { display: none; }\n.drilldown-tw__summary::before { content: \"\\25B8\"; flex: none; }\n@media (prefers-reduced-motion: no-preference) {\n.drilldown-tw__summary::before { transition: transform .15s ease; }\n}\n.drilldown-tw__row[open] .drilldown-tw__summary::before { transform: rotate(90deg); }\n.drilldown-tw__name { flex: none; width: 90px; font-weight: 600; }\n.drilldown-tw__bar-track { flex: 1; height: 10px; background: #24143014; border-radius: 5px; overflow: hidden; }\n.drilldown-tw__bar-fill { display: block; height: 100%; border-radius: 5px; }\n.drilldown-tw__total { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; }\n.drilldown-tw__subs { list-style: none; margin: 10px 0 0; padding: 0 0 0 20px; display: flex; flex-direction: column; gap: 6px; }\n.drilldown-tw__sub { display: flex; align-items: center; gap: 8px; font-size: 12px; }\n.drilldown-tw__sub-bar { display: block; height: 6px; width: 0; border-radius: 3px; flex: none; max-width: 90px; }\n.drilldown-tw__sub-name { flex: 1; }\n.drilldown-tw__sub-val { font-variant-numeric: tabular-nums; }\n.drilldown-tw__subs--2 .drilldown-tw__sub--3 { display: none; }\n</style>", "react": "export function DrillDownChart({\n category = \"{{category}}\",\n expanded = {{expanded}},\n accent = \"{{accent}}\",\n subCount = \"{{subCount}}\",\n showValues = {{showValues}},\n}) {\n const bars = [{\"isFirst\":true,\"total\":420,\"subs\":[{\"name\":\"Email\",\"value\":240},{\"name\":\"Social\",\"value\":120},{\"name\":\"Referral\",\"value\":60}]},{\"name\":\"Sales\",\"total\":300,\"subs\":[{\"name\":\"New\",\"value\":180},{\"name\":\"Repeat\",\"value\":90},{\"name\":\"Other\",\"value\":30}]},{\"name\":\"Support\",\"total\":180,\"subs\":[{\"name\":\"Tickets\",\"value\":100},{\"name\":\"Calls\",\"value\":60},{\"name\":\"Chat\",\"value\":20}]}];\n const maxTotal = 420;\n const count = Number(subCount);\n return (\n <div style={{ font: \"14px/1.4 system-ui, sans-serif\", color: \"#241430\", maxWidth: 400 }}>\n {bars.map((bar, i) => {\n const name = bar.isFirst ? category : bar.name;\n const pct = Math.round((bar.total / maxTotal) * 100);\n return (\n <details key={name} open={i === 0 ? expanded : undefined}\n style={{ border: \"1px solid #24143022\", borderRadius: 8, marginBottom: 8, padding: \"8px 10px\" }}>\n <summary style={{ display: \"flex\", alignItems: \"center\", gap: 10, cursor: \"pointer\", listStyle: \"none\" }}>\n <span style={{ flex: \"none\", width: 90, fontWeight: 600 }}>{name}</span>\n <span style={{ flex: 1, height: 10, background: \"#24143014\", borderRadius: 5, overflow: \"hidden\", display: \"inline-block\" }}>\n <span style={{ display: \"block\", height: \"100%\", width: `${pct}%`, borderRadius: 5, background: accent }} />\n </span>\n {showValues && <span style={{ flex: \"none\", fontVariantNumeric: \"tabular-nums\", fontSize: 13 }}>{bar.total}</span>}\n </summary>\n <ul style={{ listStyle: \"none\", margin: \"10px 0 0\", padding: \"0 0 0 20px\", display: \"flex\", flexDirection: \"column\", gap: 6 }}>\n {bar.subs.slice(0, count).map((s) => (\n <li key={s.name} style={{ display: \"flex\", alignItems: \"center\", gap: 8, fontSize: 12 }}>\n <span style={{ display: \"block\", height: 6, width: `${Math.round((s.value / bar.total) * 90)}px`, borderRadius: 3, flex: \"none\", background: accent }} />\n <span style={{ flex: 1 }}>{s.name}</span>\n {showValues && <span style={{ fontVariantNumeric: \"tabular-nums\" }}>{s.value}</span>}\n </li>\n ))}\n </ul>\n </details>\n );\n })}\n </div>\n );\n}" }