Edit Column Chart

Name

Also known as (comma separated)

Brief definition Vertical bar chart.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "stacked", "type": "toggle", "label": "Stack returns segment", "default": false }, { "id": "accent", "type": "color", "label": "Colour", "default": "#E8A020", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "columnCount", "type": "select", "label": "Column count", "default": "5", "options": [ "3", "4", "5" ] }, { "id": "showValues", "type": "toggle", "label": "Show data labels", "default": true } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"column-chart-demo column-chart-demo--count-{{columnCount}}{{#if stacked}} column-chart-demo--stacked{{/if}}\" style=\"--accent:{{accent}};\">\n <figcaption class=\"column-chart-demo__title\">Weekly sales{{#if stacked}} (base + returns){{/if}}</figcaption>\n <div class=\"column-chart-demo__chart\" role=\"img\" aria-label=\"Column chart of weekly sales, base orders per week with returns stacked on top when enabled\">\n <div class=\"column-chart-demo__col\">\n {{#if showValues}}<span class=\"column-chart-demo__value\">40<span class=\"column-chart-demo__value-extra\">+15</span></span>{{/if}}\n <div class=\"column-chart-demo__track\">\n <div class=\"column-chart-demo__seg column-chart-demo__seg--base\" style=\"height:40%;\"></div>\n {{#if stacked}}<div class=\"column-chart-demo__seg column-chart-demo__seg--extra\" style=\"height:15%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-demo__label\">Wk1</span>\n </div>\n <div class=\"column-chart-demo__col\">\n {{#if showValues}}<span class=\"column-chart-demo__value\">60<span class=\"column-chart-demo__value-extra\">+10</span></span>{{/if}}\n <div class=\"column-chart-demo__track\">\n <div class=\"column-chart-demo__seg column-chart-demo__seg--base\" style=\"height:60%;\"></div>\n {{#if stacked}}<div class=\"column-chart-demo__seg column-chart-demo__seg--extra\" style=\"height:10%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-demo__label\">Wk2</span>\n </div>\n <div class=\"column-chart-demo__col\">\n {{#if showValues}}<span class=\"column-chart-demo__value\">30<span class=\"column-chart-demo__value-extra\">+25</span></span>{{/if}}\n <div class=\"column-chart-demo__track\">\n <div class=\"column-chart-demo__seg column-chart-demo__seg--base\" style=\"height:30%;\"></div>\n {{#if stacked}}<div class=\"column-chart-demo__seg column-chart-demo__seg--extra\" style=\"height:25%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-demo__label\">Wk3</span>\n </div>\n <div class=\"column-chart-demo__col\">\n {{#if showValues}}<span class=\"column-chart-demo__value\">70<span class=\"column-chart-demo__value-extra\">+5</span></span>{{/if}}\n <div class=\"column-chart-demo__track\">\n <div class=\"column-chart-demo__seg column-chart-demo__seg--base\" style=\"height:70%;\"></div>\n {{#if stacked}}<div class=\"column-chart-demo__seg column-chart-demo__seg--extra\" style=\"height:5%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-demo__label\">Wk4</span>\n </div>\n <div class=\"column-chart-demo__col\">\n {{#if showValues}}<span class=\"column-chart-demo__value\">50<span class=\"column-chart-demo__value-extra\">+20</span></span>{{/if}}\n <div class=\"column-chart-demo__track\">\n <div class=\"column-chart-demo__seg column-chart-demo__seg--base\" style=\"height:50%;\"></div>\n {{#if stacked}}<div class=\"column-chart-demo__seg column-chart-demo__seg--extra\" style=\"height:20%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-demo__label\">Wk5</span>\n </div>\n </div>\n <p class=\"column-chart-demo__legend\"><span class=\"column-chart-demo__swatch column-chart-demo__swatch--base\"></span> Base{{#if stacked}} <span class=\"column-chart-demo__swatch column-chart-demo__swatch--extra\"></span> Returns{{/if}}</p>\n</figure>\n<style>\n.column-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.column-chart-demo__title { font-size: 13px; font-weight: 600; margin: 0 0 12px; }\n.column-chart-demo__chart { display: flex; align-items: flex-end; gap: 16px; height: 150px; }\n.column-chart-demo__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 44px; }\n.column-chart-demo__value { font-size: 10px; font-variant-numeric: tabular-nums; }\n.column-chart-demo__value-extra { color: #24143099; margin-left: 2px; }\n.column-chart-demo--stacked .column-chart-demo__value-extra { display: inline; }\n.column-chart-demo__value-extra { display: none; }\n.column-chart-demo__track { width: 28px; flex: 1; display: flex; flex-direction: column-reverse; background: #24143010; border-radius: 4px; overflow: hidden; }\n.column-chart-demo__seg--base { background: var(--accent); }\n.column-chart-demo__seg--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, #FAF7F2 4px 8px); opacity: .85; }\n.column-chart-demo__label { font-size: 11px; font-weight: 600; }\n.column-chart-demo__legend { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 11px; }\n.column-chart-demo__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }\n.column-chart-demo__swatch--base { background: var(--accent); }\n.column-chart-demo__swatch--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 3px, #FAF7F2 3px 6px); margin-left: 8px; }\n.column-chart-demo--count-3 .column-chart-demo__col:nth-child(n+4) { display: none; }\n.column-chart-demo--count-4 .column-chart-demo__col:nth-child(n+5) { display: none; }\n</style>", "tailwind": "<figure class=\"column-chart-tw column-chart-tw--count-{{columnCount}}{{#if stacked}} column-chart-tw--stacked{{/if}} 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\">Weekly sales{{#if stacked}} (base + returns){{/if}}</figcaption>\n <div class=\"flex items-end gap-4\" style=\"height:150px;\" role=\"img\" aria-label=\"Column chart of weekly sales, base orders per week with returns stacked on top when enabled\">\n <div class=\"column-chart-tw__col\">\n {{#if showValues}}<span class=\"column-chart-tw__value\">40<span class=\"column-chart-tw__value-extra\">+15</span></span>{{/if}}\n <div class=\"column-chart-tw__track\">\n <div class=\"column-chart-tw__seg column-chart-tw__seg--base\" style=\"height:40%;\"></div>\n {{#if stacked}}<div class=\"column-chart-tw__seg column-chart-tw__seg--extra\" style=\"height:15%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-tw__label\">Wk1</span>\n </div>\n <div class=\"column-chart-tw__col\">\n {{#if showValues}}<span class=\"column-chart-tw__value\">60<span class=\"column-chart-tw__value-extra\">+10</span></span>{{/if}}\n <div class=\"column-chart-tw__track\">\n <div class=\"column-chart-tw__seg column-chart-tw__seg--base\" style=\"height:60%;\"></div>\n {{#if stacked}}<div class=\"column-chart-tw__seg column-chart-tw__seg--extra\" style=\"height:10%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-tw__label\">Wk2</span>\n </div>\n <div class=\"column-chart-tw__col\">\n {{#if showValues}}<span class=\"column-chart-tw__value\">30<span class=\"column-chart-tw__value-extra\">+25</span></span>{{/if}}\n <div class=\"column-chart-tw__track\">\n <div class=\"column-chart-tw__seg column-chart-tw__seg--base\" style=\"height:30%;\"></div>\n {{#if stacked}}<div class=\"column-chart-tw__seg column-chart-tw__seg--extra\" style=\"height:25%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-tw__label\">Wk3</span>\n </div>\n <div class=\"column-chart-tw__col\">\n {{#if showValues}}<span class=\"column-chart-tw__value\">70<span class=\"column-chart-tw__value-extra\">+5</span></span>{{/if}}\n <div class=\"column-chart-tw__track\">\n <div class=\"column-chart-tw__seg column-chart-tw__seg--base\" style=\"height:70%;\"></div>\n {{#if stacked}}<div class=\"column-chart-tw__seg column-chart-tw__seg--extra\" style=\"height:5%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-tw__label\">Wk4</span>\n </div>\n <div class=\"column-chart-tw__col\">\n {{#if showValues}}<span class=\"column-chart-tw__value\">50<span class=\"column-chart-tw__value-extra\">+20</span></span>{{/if}}\n <div class=\"column-chart-tw__track\">\n <div class=\"column-chart-tw__seg column-chart-tw__seg--base\" style=\"height:50%;\"></div>\n {{#if stacked}}<div class=\"column-chart-tw__seg column-chart-tw__seg--extra\" style=\"height:20%;\"></div>{{/if}}\n </div>\n <span class=\"column-chart-tw__label\">Wk5</span>\n </div>\n </div>\n <p class=\"flex items-center gap-1.5 mt-3 text-[11px]\"><span class=\"column-chart-tw__swatch column-chart-tw__swatch--base inline-block w-2.5 h-2.5 rounded-sm\"></span> Base{{#if stacked}} <span class=\"column-chart-tw__swatch column-chart-tw__swatch--extra inline-block w-2.5 h-2.5 rounded-sm ml-2\"></span> Returns{{/if}}</p>\n</figure>\n<style>\n.column-chart-tw__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; width: 44px; }\n.column-chart-tw__value-extra { display: none; color: #24143099; margin-left: 2px; }\n.column-chart-tw--stacked .column-chart-tw__value-extra { display: inline; }\n.column-chart-tw__track { width: 28px; flex: 1; display: flex; flex-direction: column-reverse; background: #24143010; border-radius: 4px; overflow: hidden; }\n.column-chart-tw__seg--base { background: var(--accent); }\n.column-chart-tw__seg--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 4px, #FAF7F2 4px 8px); opacity: .85; }\n.column-chart-tw__label { font-size: 11px; font-weight: 600; }\n.column-chart-tw__swatch--base { background: var(--accent); }\n.column-chart-tw__swatch--extra { background-image: repeating-linear-gradient(45deg, var(--accent) 0 3px, #FAF7F2 3px 6px); }\n.column-chart-tw--count-3 .column-chart-tw__col:nth-child(n+4) { display: none; }\n.column-chart-tw--count-4 .column-chart-tw__col:nth-child(n+5) { display: none; }\n</style>", "react": "export function ColumnChart({\n stacked = {{stacked}},\n accent = \"{{accent}}\",\n columnCount = \"{{columnCount}}\",\n showValues = {{showValues}},\n}) {\n const all = [\n { label: \"Wk1\", base: 40, extra: 15 },\n { label: \"Wk2\", base: 60, extra: 10 },\n { label: \"Wk3\", base: 30, extra: 25 },\n { label: \"Wk4\", base: 70, extra: 5 },\n { label: \"Wk5\", base: 50, extra: 20 },\n ];\n const cols = all.slice(0, Number(columnCount));\n const extraFill = \"repeating-linear-gradient(45deg, \" + accent + \" 0 4px, #FAF7F2 4px 8px)\";\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 }}>Weekly sales{stacked ? \" (base + returns)\" : \"\"}</figcaption>\n <div style={{ display: \"flex\", alignItems: \"flex-end\", gap: 16, height: 150 }} role=\"img\" aria-label=\"Column chart of weekly sales, base orders per week with returns stacked on top when enabled\">\n {cols.map((c) => (\n <div key={c.label} style={{ display: \"flex\", flexDirection: \"column\", alignItems: \"center\", justifyContent: \"flex-end\", gap: 4, height: \"100%\", width: 44 }}>\n {showValues && <span style={{ fontSize: 10 }}>{c.base}{stacked && <span style={{ color: \"#24143099\", marginLeft: 2 }}>+{c.extra}</span>}</span>}\n <div style={{ width: 28, flex: 1, display: \"flex\", flexDirection: \"column-reverse\", background: \"#24143010\", borderRadius: 4, overflow: \"hidden\" }}>\n <div style={{ height: c.base + \"%\", background: accent }} />\n {stacked && <div style={{ height: c.extra + \"%\", backgroundImage: extraFill, opacity: 0.85 }} />}\n </div>\n <span style={{ fontSize: 11, fontWeight: 600 }}>{c.label}</span>\n </div>\n ))}\n </div>\n <p style={{ display: \"flex\", alignItems: \"center\", gap: 6, margin: \"12px 0 0\", fontSize: 11 }}>\n <span style={{ display: \"inline-block\", width: 10, height: 10, borderRadius: 2, background: accent }} /> Base\n {stacked && (\n <>\n <span style={{ display: \"inline-block\", width: 10, height: 10, borderRadius: 2, backgroundImage: extraFill, marginLeft: 8 }} /> Returns\n </>\n )}\n </p>\n </figure>\n );\n}" }