Edit Bar Chart

Name

Also known as (comma separated)

Brief definition Values represented by bars.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "orientation", "type": "select", "label": "Orientation", "default": "horizontal", "options": [ "horizontal", "vertical" ] }, { "id": "showValues", "type": "toggle", "label": "Show data labels", "default": true }, { "id": "accent", "type": "color", "label": "Colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "barCount", "type": "select", "label": "Bar count", "default": "5", "options": [ "3", "4", "5" ] } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"bar-chart-demo bar-chart-demo--{{orientation}} bar-chart-demo--count-{{barCount}}\" style=\"--accent:{{accent}};\">\n <figcaption class=\"bar-chart-demo__title\">Orders this week</figcaption>\n <div class=\"bar-chart-demo__chart bar-chart-demo__chart--horizontal\">\n <div class=\"bar-chart-demo__row\">\n <span class=\"bar-chart-demo__label\">Mon</span>\n <div class=\"bar-chart-demo__track\"><div class=\"bar-chart-demo__bar\" style=\"width:50%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-demo__value\">50</span>{{/if}}\n </div>\n <div class=\"bar-chart-demo__row\">\n <span class=\"bar-chart-demo__label\">Tue</span>\n <div class=\"bar-chart-demo__track\"><div class=\"bar-chart-demo__bar\" style=\"width:75%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-demo__value\">75</span>{{/if}}\n </div>\n <div class=\"bar-chart-demo__row\">\n <span class=\"bar-chart-demo__label\">Wed</span>\n <div class=\"bar-chart-demo__track\"><div class=\"bar-chart-demo__bar\" style=\"width:35%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-demo__value\">35</span>{{/if}}\n </div>\n <div class=\"bar-chart-demo__row\">\n <span class=\"bar-chart-demo__label\">Thu</span>\n <div class=\"bar-chart-demo__track\"><div class=\"bar-chart-demo__bar\" style=\"width:90%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-demo__value\">90</span>{{/if}}\n </div>\n <div class=\"bar-chart-demo__row\">\n <span class=\"bar-chart-demo__label\">Fri</span>\n <div class=\"bar-chart-demo__track\"><div class=\"bar-chart-demo__bar\" style=\"width:60%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-demo__value\">60</span>{{/if}}\n </div>\n </div>\n <div class=\"bar-chart-demo__chart bar-chart-demo__chart--vertical\">\n <div class=\"bar-chart-demo__col\">\n {{#if showValues}}<span class=\"bar-chart-demo__vvalue\">50</span>{{/if}}\n <div class=\"bar-chart-demo__vtrack\"><div class=\"bar-chart-demo__vbar\" style=\"height:50%;\"></div></div>\n <span class=\"bar-chart-demo__vlabel\">Mon</span>\n </div>\n <div class=\"bar-chart-demo__col\">\n {{#if showValues}}<span class=\"bar-chart-demo__vvalue\">75</span>{{/if}}\n <div class=\"bar-chart-demo__vtrack\"><div class=\"bar-chart-demo__vbar\" style=\"height:75%;\"></div></div>\n <span class=\"bar-chart-demo__vlabel\">Tue</span>\n </div>\n <div class=\"bar-chart-demo__col\">\n {{#if showValues}}<span class=\"bar-chart-demo__vvalue\">35</span>{{/if}}\n <div class=\"bar-chart-demo__vtrack\"><div class=\"bar-chart-demo__vbar\" style=\"height:35%;\"></div></div>\n <span class=\"bar-chart-demo__vlabel\">Wed</span>\n </div>\n <div class=\"bar-chart-demo__col\">\n {{#if showValues}}<span class=\"bar-chart-demo__vvalue\">90</span>{{/if}}\n <div class=\"bar-chart-demo__vtrack\"><div class=\"bar-chart-demo__vbar\" style=\"height:90%;\"></div></div>\n <span class=\"bar-chart-demo__vlabel\">Thu</span>\n </div>\n <div class=\"bar-chart-demo__col\">\n {{#if showValues}}<span class=\"bar-chart-demo__vvalue\">60</span>{{/if}}\n <div class=\"bar-chart-demo__vtrack\"><div class=\"bar-chart-demo__vbar\" style=\"height:60%;\"></div></div>\n <span class=\"bar-chart-demo__vlabel\">Fri</span>\n </div>\n </div>\n <table class=\"bar-chart-demo__table\">\n <caption>Orders this week, by day</caption>\n <thead><tr><th scope=\"col\">Day</th><th scope=\"col\">Orders</th></tr></thead>\n <tbody>\n <tr><th scope=\"row\">Mon</th><td>50 orders</td></tr>\n <tr><th scope=\"row\">Tue</th><td>75 orders</td></tr>\n <tr><th scope=\"row\">Wed</th><td>35 orders</td></tr>\n <tr><th scope=\"row\">Thu</th><td>90 orders</td></tr>\n <tr><th scope=\"row\">Fri</th><td>60 orders</td></tr>\n </tbody>\n </table>\n</figure>\n<style>\n.bar-chart-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.bar-chart-demo__title { font-size: 13px; font-weight: 600; margin: 0 0 12px; }\n.bar-chart-demo__chart { display: none; }\n.bar-chart-demo--horizontal .bar-chart-demo__chart--horizontal { display: flex; flex-direction: column; gap: 8px; }\n.bar-chart-demo--vertical .bar-chart-demo__chart--vertical { display: flex; align-items: flex-end; gap: 14px; height: 140px; }\n.bar-chart-demo__row { display: flex; align-items: center; gap: 8px; }\n.bar-chart-demo__label { width: 32px; flex-shrink: 0; font-size: 11px; font-weight: 600; }\n.bar-chart-demo__track { flex: 1; height: 16px; background: #24143010; border-radius: 4px; overflow: hidden; }\n.bar-chart-demo__bar { height: 100%; background: var(--accent); border-radius: 4px; }\n.bar-chart-demo__value { width: 26px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }\n.bar-chart-demo__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 40px; }\n.bar-chart-demo__vtrack { width: 24px; flex: 1; display: flex; align-items: flex-end; background: #24143010; border-radius: 4px; overflow: hidden; }\n.bar-chart-demo__vbar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }\n.bar-chart-demo__vvalue { font-size: 10px; font-variant-numeric: tabular-nums; }\n.bar-chart-demo__vlabel { font-size: 11px; font-weight: 600; }\n.bar-chart-demo__table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.bar-chart-demo--count-3 .bar-chart-demo__row:nth-child(n+4),\n.bar-chart-demo--count-3 .bar-chart-demo__col:nth-child(n+4) { display: none; }\n.bar-chart-demo--count-4 .bar-chart-demo__row:nth-child(n+5),\n.bar-chart-demo--count-4 .bar-chart-demo__col:nth-child(n+5) { display: none; }\n</style>", "tailwind": "<figure class=\"bar-chart-tw bar-chart-tw--{{orientation}} bar-chart-tw--count-{{barCount}} max-w-[640px] p-4 border-[1.5px] border-[#24143022] rounded-xl box-border font-sans text-[#241430] bg-[#FAF7F2]\" style=\"--accent:{{accent}};\">\n <figcaption class=\"text-[13px] font-semibold mb-3\">Orders this week</figcaption>\n <div class=\"bar-chart-tw__chart bar-chart-tw__chart--horizontal flex-col gap-2\">\n <div class=\"bar-chart-tw__row\">\n <span class=\"bar-chart-tw__label\">Mon</span>\n <div class=\"bar-chart-tw__track\"><div class=\"bar-chart-tw__bar\" style=\"width:50%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-tw__value\">50</span>{{/if}}\n </div>\n <div class=\"bar-chart-tw__row\">\n <span class=\"bar-chart-tw__label\">Tue</span>\n <div class=\"bar-chart-tw__track\"><div class=\"bar-chart-tw__bar\" style=\"width:75%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-tw__value\">75</span>{{/if}}\n </div>\n <div class=\"bar-chart-tw__row\">\n <span class=\"bar-chart-tw__label\">Wed</span>\n <div class=\"bar-chart-tw__track\"><div class=\"bar-chart-tw__bar\" style=\"width:35%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-tw__value\">35</span>{{/if}}\n </div>\n <div class=\"bar-chart-tw__row\">\n <span class=\"bar-chart-tw__label\">Thu</span>\n <div class=\"bar-chart-tw__track\"><div class=\"bar-chart-tw__bar\" style=\"width:90%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-tw__value\">90</span>{{/if}}\n </div>\n <div class=\"bar-chart-tw__row\">\n <span class=\"bar-chart-tw__label\">Fri</span>\n <div class=\"bar-chart-tw__track\"><div class=\"bar-chart-tw__bar\" style=\"width:60%;\"></div></div>\n {{#if showValues}}<span class=\"bar-chart-tw__value\">60</span>{{/if}}\n </div>\n </div>\n <div class=\"bar-chart-tw__chart bar-chart-tw__chart--vertical items-end gap-3.5\" style=\"height:140px;\">\n <div class=\"bar-chart-tw__col\">\n {{#if showValues}}<span class=\"bar-chart-tw__vvalue\">50</span>{{/if}}\n <div class=\"bar-chart-tw__vtrack\"><div class=\"bar-chart-tw__vbar\" style=\"height:50%;\"></div></div>\n <span class=\"bar-chart-tw__vlabel\">Mon</span>\n </div>\n <div class=\"bar-chart-tw__col\">\n {{#if showValues}}<span class=\"bar-chart-tw__vvalue\">75</span>{{/if}}\n <div class=\"bar-chart-tw__vtrack\"><div class=\"bar-chart-tw__vbar\" style=\"height:75%;\"></div></div>\n <span class=\"bar-chart-tw__vlabel\">Tue</span>\n </div>\n <div class=\"bar-chart-tw__col\">\n {{#if showValues}}<span class=\"bar-chart-tw__vvalue\">35</span>{{/if}}\n <div class=\"bar-chart-tw__vtrack\"><div class=\"bar-chart-tw__vbar\" style=\"height:35%;\"></div></div>\n <span class=\"bar-chart-tw__vlabel\">Wed</span>\n </div>\n <div class=\"bar-chart-tw__col\">\n {{#if showValues}}<span class=\"bar-chart-tw__vvalue\">90</span>{{/if}}\n <div class=\"bar-chart-tw__vtrack\"><div class=\"bar-chart-tw__vbar\" style=\"height:90%;\"></div></div>\n <span class=\"bar-chart-tw__vlabel\">Thu</span>\n </div>\n <div class=\"bar-chart-tw__col\">\n {{#if showValues}}<span class=\"bar-chart-tw__vvalue\">60</span>{{/if}}\n <div class=\"bar-chart-tw__vtrack\"><div class=\"bar-chart-tw__vbar\" style=\"height:60%;\"></div></div>\n <span class=\"bar-chart-tw__vlabel\">Fri</span>\n </div>\n </div>\n <table class=\"bar-chart-tw__table\">\n <caption>Orders this week, by day</caption>\n <thead><tr><th scope=\"col\">Day</th><th scope=\"col\">Orders</th></tr></thead>\n <tbody>\n <tr><th scope=\"row\">Mon</th><td>50 orders</td></tr>\n <tr><th scope=\"row\">Tue</th><td>75 orders</td></tr>\n <tr><th scope=\"row\">Wed</th><td>35 orders</td></tr>\n <tr><th scope=\"row\">Thu</th><td>90 orders</td></tr>\n <tr><th scope=\"row\">Fri</th><td>60 orders</td></tr>\n </tbody>\n </table>\n</figure>\n<style>\n.bar-chart-tw__chart { display: none; }\n.bar-chart-tw--horizontal .bar-chart-tw__chart--horizontal { display: flex; }\n.bar-chart-tw--vertical .bar-chart-tw__chart--vertical { display: flex; }\n.bar-chart-tw__row { display: flex; align-items: center; gap: 8px; }\n.bar-chart-tw__label { width: 32px; flex-shrink: 0; font-size: 11px; font-weight: 600; }\n.bar-chart-tw__track { flex: 1; height: 16px; background: #24143010; border-radius: 4px; overflow: hidden; }\n.bar-chart-tw__bar { height: 100%; background: var(--accent); border-radius: 4px; }\n.bar-chart-tw__value { width: 26px; text-align: right; font-size: 11px; }\n.bar-chart-tw__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 40px; }\n.bar-chart-tw__vtrack { width: 24px; flex: 1; display: flex; align-items: flex-end; background: #24143010; border-radius: 4px; overflow: hidden; }\n.bar-chart-tw__vbar { width: 100%; background: var(--accent); border-radius: 4px 4px 0 0; }\n.bar-chart-tw__vvalue { font-size: 10px; }\n.bar-chart-tw__vlabel { font-size: 11px; font-weight: 600; }\n.bar-chart-tw__table { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }\n.bar-chart-tw--count-3 .bar-chart-tw__row:nth-child(n+4),\n.bar-chart-tw--count-3 .bar-chart-tw__col:nth-child(n+4) { display: none; }\n.bar-chart-tw--count-4 .bar-chart-tw__row:nth-child(n+5),\n.bar-chart-tw--count-4 .bar-chart-tw__col:nth-child(n+5) { display: none; }\n</style>", "react": "export function BarChart({\n orientation = \"{{orientation}}\",\n showValues = {{showValues}},\n accent = \"{{accent}}\",\n barCount = \"{{barCount}}\",\n}) {\n const all = [\n { label: \"Mon\", pct: 50, val: 50 },\n { label: \"Tue\", pct: 75, val: 75 },\n { label: \"Wed\", pct: 35, val: 35 },\n { label: \"Thu\", pct: 90, val: 90 },\n { label: \"Fri\", pct: 60, val: 60 },\n ];\n const bars = all.slice(0, Number(barCount));\n return (\n <figure 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 <figcaption style={{ fontSize: 13, fontWeight: 600, marginBottom: 12 }}>Orders this week</figcaption>\n {orientation === \"horizontal\" ? (\n <div style={{ display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n {bars.map((b) => (\n <div key={b.label} style={{ display: \"flex\", alignItems: \"center\", gap: 8 }}>\n <span style={{ width: 32, flexShrink: 0, fontSize: 11, fontWeight: 600 }}>{b.label}</span>\n <div style={{ flex: 1, height: 16, background: \"#24143010\", borderRadius: 4, overflow: \"hidden\" }}>\n <div style={{ height: \"100%\", width: b.pct + \"%\", background: accent, borderRadius: 4 }} />\n </div>\n {showValues && <span style={{ width: 26, textAlign: \"right\", fontSize: 11 }}>{b.val}</span>}\n </div>\n ))}\n </div>\n ) : (\n <div style={{ display: \"flex\", alignItems: \"flex-end\", gap: 14, height: 140 }}>\n {bars.map((b) => (\n <div key={b.label} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"flex-end\", gap: 4, height: \"100%\", width: 40 }}>\n {showValues && <span style={{ fontSize: 10 }}>{b.val}</span>}\n <div style={{ width: 24, flex: 1, display: \"flex\", alignItems: \"flex-end\", background: \"#24143010\", borderRadius: 4, overflow: \"hidden\" }}>\n <div style={{ width: \"100%\", height: b.pct + \"%\", background: accent, borderRadius: \"4px 4px 0 0\" }} />\n </div>\n <span style={{ fontSize: 11, fontWeight: 600 }}>{b.label}</span>\n </div>\n ))}\n </div>\n )}\n <table style={{ position: \"absolute\", width: 1, height: 1, overflow: \"hidden\", clip: \"rect(0 0 0 0)\", whiteSpace: \"nowrap\" }}>\n <caption>Orders this week, by day</caption>\n <thead><tr><th scope=\"col\">Day</th><th scope=\"col\">Orders</th></tr></thead>\n <tbody>\n {bars.map((b) => (\n <tr key={b.label}><th scope=\"row\">{b.label}</th><td>{b.val} orders</td></tr>\n ))}\n </tbody>\n </table>\n </figure>\n );\n}" }