{"id":"db749f70-6efe-4168-af3c-4d3809192cf6","name":"Weekly Pulse Bars","slug":"weekly-pulse-bars","category":"email-charts","description":"A weekly digest bar chart for product emails: eyebrow, metric name, big total with a delta chip, and one clean Chart.js bar per day. Link it as an image and your newsletter always shows this week's numbers.","sample_params":{"delta":"+18% vs last week","eyebrow":"Your week in numbers","footnote":"Week 32 · Aug 4 – Aug 10","hue":"245","title":"Sign-ups","total":"332","values":"38,52,61,45,74,29,33"},"spec":{"name":"weekly-pulse-bars","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;overflow:hidden}\n.eyebrow{font-size:20px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}\n.chip{display:inline-block;font-size:22px;font-weight:700;padding:6px 18px;border-radius:999px;vertical-align:middle}\n.chip.up{color:#0a7d4f;background:#e2f5ea}\n.chip.down{color:#b3261e;background:#fde9e7}\n.chip.flat{color:#5b6472;background:#eef0f4}\n\nbody{background:#fff;color:#12161f}\n.card{width:100vw;height:100vh;padding:56px 64px 48px;display:flex;flex-direction:column}\n.head{display:flex;justify-content:space-between;align-items:flex-start}\n.eyebrow{color:hsl(var(--h) 70% 52%)}\nh1{font-size:52px;font-weight:800;letter-spacing:-0.02em;margin-top:10px;max-width:640px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.total{text-align:right}\n.total .n{font-size:72px;font-weight:800;letter-spacing:-0.03em;font-variant-numeric:tabular-nums;line-height:1}\n.total .chip{margin-top:12px}\n.chartbox{flex:1;margin-top:34px;position:relative}\n.foot{margin-top:20px;display:flex;justify-content:space-between;font-size:19px;color:#98a0af;letter-spacing:.06em;text-transform:uppercase}\n\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody style='--h: {{.hue}}'\u003e\n\u003cdiv class='card'\u003e\n  \u003cdiv class='head'\u003e\n    \u003cdiv\u003e\n      \u003cp class='eyebrow'\u003e{{.eyebrow}}\u003c/p\u003e\n      \u003ch1\u003e{{.title}}\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003cdiv class='total'\u003e\n      \u003cdiv class='n'\u003e{{.total}}\u003c/div\u003e\n      {{if .delta}}\u003cspan id='delta' class='chip flat'\u003e{{.delta}}\u003c/span\u003e{{end}}\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class='chartbox'\u003e\u003ccanvas id='c' width='1072' height='330'\u003e\u003c/canvas\u003e\u003c/div\u003e\n  \u003cdiv class='foot'\u003e\u003cspan\u003emedia0\u003c/span\u003e\u003cspan\u003e{{.footnote}}\u003c/span\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cscript src='https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\nfunction chipClass(t){t=(t||'').trim();if(t[0]==='+')return 'chip up';if(t[0]==='-'||t[0]==='\\u2212')return 'chip down';return 'chip flat'}\nvar d=document.getElementById('delta');if(d)d.className=chipClass(d.textContent);\nvar HUE=Number({{.hue}});\nvar values={{.values}}.split(',').map(Number);\nvar labels={{.labels}}.split(',');\nvar max=Math.max.apply(null,values);\nChart.defaults.font.family=\"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif\";\nChart.defaults.font.size=22;\nChart.defaults.color='#8a93a6';\nnew Chart(document.getElementById('c'),{\n  type:'bar',\n  data:{labels:labels,datasets:[{\n    data:values,\n    backgroundColor:values.map(function(v){return v===max?'hsl('+HUE+' 80% 50%)':'hsl('+HUE+' 85% 62%)'}),\n    borderRadius:10,borderSkipped:false,maxBarThickness:96,categoryPercentage:.72\n  }]},\n  options:{\n    responsive:false,animation:false,devicePixelRatio:window.devicePixelRatio,\n    plugins:{legend:{display:false},tooltip:{enabled:false}},\n    scales:{\n      x:{grid:{display:false},border:{display:false},ticks:{font:{size:23,weight:600}}},\n      y:{beginAtZero:true,grid:{color:'#eef0f4'},border:{display:false},ticks:{maxTicksLimit:5,font:{size:20}}}\n    }\n  }\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"delta":{"type":"string","maxLen":40,"description":"Change chip next to the total, e.g. +18% vs last week. Leading + renders green, - red."},"eyebrow":{"type":"string","default":"Your week in numbers","maxLen":40,"description":"Small uppercase kicker above the metric name."},"footnote":{"type":"string","maxLen":60,"description":"Small right-aligned footer note, e.g. the date range."},"hue":{"type":"number","default":"245","maxLen":5,"description":"Accent hue 0-360 for bars and eyebrow."},"labels":{"type":"string","default":"Mon,Tue,Wed,Thu,Fri,Sat,Sun","maxLen":300,"description":"Comma-separated labels under the bars, matched by position."},"title":{"type":"string","required":true,"maxLen":60,"description":"Metric name, e.g. Sign-ups or Orders."},"total":{"type":"string","required":true,"maxLen":16,"description":"Big headline number for the period, e.g. 332."},"values":{"type":"string","required":true,"maxLen":300,"description":"Comma-separated bar values, one per day/bucket, e.g. 38,52,61,45,74,29,33. No spaces."}}}}