{"id":"f5cabd73-4c69-4dc7-a591-e0027e9cfc30","name":"Bar Chart Card","slug":"bar-chart-card","category":"email-charts","description":"A dark gradient bar chart card with glowing bars, value captions and axis labels — feed any number of bars through one compact comma-separated values param.","sample_params":{"hue":"245","labels":"Mar,Apr,May,Jun","subtitle":"Q1–Q2 2026 · thousands","title":"Monthly active users","values":"42,58,71,96"},"spec":{"name":"bar-chart-card","width":1200,"height":630,"scale":2,"html":"\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n\u003cmeta charset='utf-8'\u003e\n\u003cstyle\u003e\n*{margin:0;padding:0;box-sizing:border-box}\nhtml,body{width:100%;height:100%}\nbody{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:linear-gradient(135deg,#0a0e1e 0%,#121631 55%,#191238 100%);color:#eef1ff;overflow:hidden}\n.card{width:100vw;height:100vh;padding:56px 72px 48px;display:flex;flex-direction:column}\n.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}\n.title{font-size:52px;font-weight:800;letter-spacing:-0.02em;line-height:1.08;max-width:820px;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.subtitle{margin-top:10px;font-size:26px;font-weight:500;color:#9aa3c7;overflow-wrap:break-word;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}\n.dot{flex:none;width:16px;height:16px;border-radius:50%;margin-bottom:10px;background:hsl(var(--h) 90% 66%);box-shadow:0 0 24px hsl(var(--h) 90% 66% / .8)}\n.chart{flex:1;display:flex;align-items:flex-end;gap:44px;margin-top:44px;padding-top:8px;background:repeating-linear-gradient(to top,transparent 0 79px,rgba(255,255,255,.06) 79px 80px);border-bottom:2px solid rgba(255,255,255,.16)}\n.col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}\n.val{font-size:32px;font-weight:700;color:#cdd4fa;margin-bottom:14px;font-variant-numeric:tabular-nums}\n.bar{width:100%;max-width:170px;border-radius:16px 16px 4px 4px;height:calc(var(--v)/var(--max)*260px + 8px);background:linear-gradient(180deg,hsl(calc(var(--h) + var(--i)*14) 92% 72%),hsl(calc(var(--h) + var(--i)*14) 78% 58%) 55%,hsl(calc(var(--h) + var(--i)*14) 70% 48%));box-shadow:0 10px 30px hsl(calc(var(--h) + var(--i)*14) 80% 60% / .35)}\n.labels{display:flex;gap:44px;margin-top:18px}\n.labels span{flex:1;text-align:center;font-size:26px;font-weight:600;color:#8f98bf;letter-spacing:.01em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n.foot{margin-top:34px;display:flex;justify-content:space-between;align-items:center;font-size:20px;color:#5b6490;letter-spacing:.06em;text-transform:uppercase}\n.foot hr{flex:1;border:none;border-top:1px solid rgba(255,255,255,.12);margin-left:24px}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style='--h: {{.hue}}'\u003e\n\u003cdiv class='card' style='--max: max({{range $i, $v := split .values \",\"}}{{if $i}},{{end}}{{$v}}{{end}},1)'\u003e\n  \u003cdiv class='head'\u003e\n    \u003cdiv\u003e\n      \u003ch1 class='title'\u003e{{.title}}\u003c/h1\u003e\n      \u003cp class='subtitle'\u003e{{.subtitle}}\u003c/p\u003e\n    \u003c/div\u003e\n    \u003cdiv class='dot'\u003e\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='chart'\u003e\n    {{range $i, $v := split .values \",\"}}\u003cdiv class='col' style='--v: {{$v}}; --i: {{$i}}'\u003e\u003cspan class='val'\u003e{{$v}}\u003c/span\u003e\u003cdiv class='bar'\u003e\u003c/div\u003e\u003c/div\u003e{{end}}\n  \u003c/div\u003e\n  {{if .labels}}\u003cdiv class='labels'\u003e\n    {{range split .labels \",\"}}\u003cspan\u003e{{.}}\u003c/span\u003e{{end}}\n  \u003c/div\u003e{{end}}\n  \u003cdiv class='foot'\u003e\u003cspan\u003emedia0\u003c/span\u003e\u003chr\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"hue":{"type":"number","default":"245","maxLen":5,"description":"Base hue (0-360) of the bar gradient; each bar shifts slightly warmer."},"labels":{"type":"string","maxLen":300,"description":"Comma-separated labels under the bars, matched to values by position, e.g. Mar,Apr,May,Jun."},"subtitle":{"type":"string","maxLen":120,"description":"Supporting line under the title, e.g. time range or unit."},"title":{"type":"string","required":true,"maxLen":90,"description":"Chart headline shown at the top of the card."},"values":{"type":"string","required":true,"maxLen":200,"description":"Comma-separated bar values, e.g. 42,58,71,96 — one bar per value, auto-scaled to the largest. No spaces after commas."}}}}