{"id":"e34ea31e-c98f-4b7a-a32b-09d2bfba6883","name":"Growth Area Chart","slug":"growth-area-chart","category":"email-charts","description":"A minimal gradient area chart with one oversized stat and a delta chip — the shadcn look, rendered for email. Feed it a comma-separated series and link the image; every open shows the current curve.","sample_params":{"delta":"+12.4%","eyebrow":"Last 30 days","footnote":"Updated daily","hue":"220","stat":"8,742","title":"Daily active users","values":"6120,6180,6155,6240,6310,6295,6380,6420,6390,6510,6585,6560,6640,6720,6690,6810,6905,6880,6990,7080,7150,7120,7260,7390,7350,7480,7610,7690,8140,8742"},"spec":{"name":"growth-area-chart","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:#0d1220}\n.card{width:100vw;height:100vh;padding:58px 64px 40px;display:flex;flex-direction:column}\n.eyebrow{color:#79818f}\n.statrow{display:flex;align-items:baseline;gap:22px;margin-top:14px}\n.stat{font-size:88px;font-weight:800;letter-spacing:-0.04em;font-variant-numeric:tabular-nums;line-height:1}\nh1{font-size:30px;font-weight:600;color:#4b5262;margin-top:12px}\n.chartbox{flex:1;margin-top:26px;position:relative}\n.foot{margin-top:14px;display:flex;justify-content:space-between;font-size:18px;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  \u003cp class='eyebrow'\u003e{{.eyebrow}}\u003c/p\u003e\n  \u003cdiv class='statrow'\u003e\n    \u003cspan class='stat'\u003e{{.stat}}\u003c/span\u003e\n    {{if .delta}}\u003cspan id='delta' class='chip flat'\u003e{{.delta}}\u003c/span\u003e{{end}}\n  \u003c/div\u003e\n  \u003ch1\u003e{{.title}}\u003c/h1\u003e\n  \u003cdiv class='chartbox'\u003e\u003ccanvas id='c' width='1072' height='260'\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 rawLabels={{.labels}};\nvar labels=rawLabels?rawLabels.split(','):values.map(function(){return ''});\nvar el=document.getElementById('c');\nvar g=el.getContext('2d').createLinearGradient(0,0,0,260);\ng.addColorStop(0,'hsl('+HUE+' 85% 55% / .30)');\ng.addColorStop(1,'hsl('+HUE+' 85% 55% / 0)');\nChart.defaults.font.family=\"-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif\";\nChart.defaults.color='#98a0af';\nnew Chart(el,{\n  type:'line',\n  data:{labels:labels,datasets:[{\n    data:values,fill:true,backgroundColor:g,\n    borderColor:'hsl('+HUE+' 75% 50%)',borderWidth:5,tension:.4,\n    pointRadius:values.map(function(_,i){return i===values.length-1?7:0}),\n    pointBackgroundColor:'hsl('+HUE+' 75% 50%)',\n    pointBorderColor:'#fff',pointBorderWidth:3\n  }]},\n  options:{\n    responsive:false,animation:false,devicePixelRatio:window.devicePixelRatio,\n    layout:{padding:{top:10,right:12}},\n    plugins:{legend:{display:false},tooltip:{enabled:false}},\n    scales:{\n      x:{display:!!rawLabels,grid:{display:false},border:{display:false},ticks:{maxTicksLimit:6,maxRotation:0,font:{size:20}}},\n      y:{grid:{color:'#f0f2f6'},border:{display:false},ticks:{maxTicksLimit:4,font:{size:19}}}\n    }\n  }\n});\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n","params":{"delta":{"type":"string","maxLen":30,"description":"Change chip next to the stat, e.g. +12.4%. Leading + renders green, - red."},"eyebrow":{"type":"string","default":"Last 30 days","maxLen":40,"description":"Small uppercase kicker, e.g. the time range."},"footnote":{"type":"string","maxLen":60,"description":"Small right-aligned footer note."},"hue":{"type":"number","default":"220","maxLen":5,"description":"Accent hue 0-360 for line and gradient fill."},"labels":{"type":"string","maxLen":400,"description":"Optional comma-separated x labels (thinned automatically). Empty hides the x axis."},"stat":{"type":"string","required":true,"maxLen":16,"description":"Oversized headline number, e.g. the current value."},"title":{"type":"string","required":true,"maxLen":70,"description":"Metric name under the stat, e.g. Daily active users."},"values":{"type":"string","required":true,"maxLen":900,"description":"Comma-separated series values, oldest first, e.g. 6120,6180,6240. Any length."}}}}