Edit Area Chart

Name

Also known as (comma separated)

Brief definition Filled line chart.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "trend", "type": "select", "label": "Trend", "default": "rising", "options": [ "rising", "volatile", "declining" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#BFD9F2", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showGrid", "type": "toggle", "label": "Show gridlines", "default": true }, { "id": "height", "type": "number", "label": "Height (px)", "default": 140, "min": 80, "max": 220, "step": 10 } ]

Templates (JSON object keyed by format) { "html": "<figure class=\"area-chart-demo\" style=\"--accent:{{accent}};\">\n <figcaption class=\"area-chart-demo__title\">Monthly revenue &mdash; {{trend}} trend</figcaption>\n <svg class=\"area-chart-demo__svg area-chart-demo__svg--{{trend}}\" viewBox=\"0 0 300 130\" style=\"height:{{height}}px;\" role=\"img\" aria-label=\"Area chart of monthly revenue from January to June, showing a {{trend}} trend, values between 8 thousand and 48 thousand dollars\">\n <g class=\"area-chart-demo__grid\" aria-hidden=\"true\">\n {{#if showGrid}}\n <line x1=\"30\" x2=\"300\" y1=\"20\" y2=\"20\" class=\"area-chart-demo__gridline\" />\n <line x1=\"30\" x2=\"300\" y1=\"55\" y2=\"55\" class=\"area-chart-demo__gridline\" />\n <line x1=\"30\" x2=\"300\" y1=\"90\" y2=\"90\" class=\"area-chart-demo__gridline\" />\n {{/if}}\n </g>\n <g aria-hidden=\"true\">\n <text x=\"26\" y=\"24\" class=\"area-chart-demo__tick\">48k</text>\n <text x=\"26\" y=\"59\" class=\"area-chart-demo__tick\">28k</text>\n <text x=\"26\" y=\"94\" class=\"area-chart-demo__tick\">8k</text>\n <line x1=\"30\" y1=\"10\" x2=\"30\" y2=\"110\" class=\"area-chart-demo__axisline\" />\n <line x1=\"30\" y1=\"110\" x2=\"300\" y2=\"110\" class=\"area-chart-demo__axisline\" />\n </g>\n <path class=\"area-chart-demo__fill area-chart-demo__fill--rising\" d=\"M30,100 L80,85 L130,72 L180,55 L230,35 L280,15 L280,110 L30,110 Z\" />\n <path class=\"area-chart-demo__line area-chart-demo__line--rising\" d=\"M30,100 L80,85 L130,72 L180,55 L230,35 L280,15\" />\n <path class=\"area-chart-demo__fill area-chart-demo__fill--volatile\" d=\"M30,60 L80,20 L130,80 L180,30 L230,90 L280,45 L280,110 L30,110 Z\" />\n <path class=\"area-chart-demo__line area-chart-demo__line--volatile\" d=\"M30,60 L80,20 L130,80 L180,30 L230,90 L280,45\" />\n <path class=\"area-chart-demo__fill area-chart-demo__fill--declining\" d=\"M30,15 L80,35 L130,50 L180,65 L230,85 L280,100 L280,110 L30,110 Z\" />\n <path class=\"area-chart-demo__line area-chart-demo__line--declining\" d=\"M30,15 L80,35 L130,50 L180,65 L230,85 L280,100\" />\n <g class=\"area-chart-demo__months\" aria-hidden=\"true\">\n <text x=\"30\" y=\"122\">Jan</text><text x=\"80\" y=\"122\">Feb</text><text x=\"130\" y=\"122\">Mar</text>\n <text x=\"180\" y=\"122\">Apr</text><text x=\"230\" y=\"122\">May</text><text x=\"280\" y=\"122\">Jun</text>\n </g>\n </svg>\n</figure>\n<style>\n.area-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.area-chart-demo__title { font-size: 13px; font-weight: 600; margin: 0 0 10px; }\n.area-chart-demo__svg { width: 100%; display: block; overflow: visible; }\n.area-chart-demo__gridline { stroke: #24143014; stroke-width: 1; }\n.area-chart-demo__axisline { stroke: #24143055; stroke-width: 1; }\n.area-chart-demo__tick { font-size: 9px; fill: #24143099; text-anchor: end; }\n.area-chart-demo__months text { font-size: 9px; fill: #24143099; text-anchor: middle; }\n.area-chart-demo__fill { fill: var(--accent); fill-opacity: .35; stroke: none; display: none; }\n.area-chart-demo__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; display: none; }\n.area-chart-demo__svg--rising .area-chart-demo__fill--rising, .area-chart-demo__svg--rising .area-chart-demo__line--rising { display: block; }\n.area-chart-demo__svg--volatile .area-chart-demo__fill--volatile, .area-chart-demo__svg--volatile .area-chart-demo__line--volatile { display: block; }\n.area-chart-demo__svg--declining .area-chart-demo__fill--declining, .area-chart-demo__svg--declining .area-chart-demo__line--declining { display: block; }\n</style>", "tailwind": "<figure class=\"area-chart-tw 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-2.5\">Monthly revenue &mdash; {{trend}} trend</figcaption>\n <svg class=\"area-chart-tw__svg area-chart-tw__svg--{{trend}} w-full block\" style=\"height:{{height}}px;overflow:visible;\" viewBox=\"0 0 300 130\" role=\"img\" aria-label=\"Area chart of monthly revenue from January to June, showing a {{trend}} trend, values between 8 thousand and 48 thousand dollars\">\n <g aria-hidden=\"true\">\n {{#if showGrid}}\n <line x1=\"30\" x2=\"300\" y1=\"20\" y2=\"20\" stroke=\"#24143014\" />\n <line x1=\"30\" x2=\"300\" y1=\"55\" y2=\"55\" stroke=\"#24143014\" />\n <line x1=\"30\" x2=\"300\" y1=\"90\" y2=\"90\" stroke=\"#24143014\" />\n {{/if}}\n </g>\n <g aria-hidden=\"true\">\n <text x=\"26\" y=\"24\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"end\">48k</text>\n <text x=\"26\" y=\"59\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"end\">28k</text>\n <text x=\"26\" y=\"94\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"end\">8k</text>\n <line x1=\"30\" y1=\"10\" x2=\"30\" y2=\"110\" stroke=\"#24143055\" />\n <line x1=\"30\" y1=\"110\" x2=\"300\" y2=\"110\" stroke=\"#24143055\" />\n </g>\n <path class=\"area-chart-tw__fill area-chart-tw__fill--rising\" d=\"M30,100 L80,85 L130,72 L180,55 L230,35 L280,15 L280,110 L30,110 Z\" />\n <path class=\"area-chart-tw__line area-chart-tw__line--rising\" d=\"M30,100 L80,85 L130,72 L180,55 L230,35 L280,15\" />\n <path class=\"area-chart-tw__fill area-chart-tw__fill--volatile\" d=\"M30,60 L80,20 L130,80 L180,30 L230,90 L280,45 L280,110 L30,110 Z\" />\n <path class=\"area-chart-tw__line area-chart-tw__line--volatile\" d=\"M30,60 L80,20 L130,80 L180,30 L230,90 L280,45\" />\n <path class=\"area-chart-tw__fill area-chart-tw__fill--declining\" d=\"M30,15 L80,35 L130,50 L180,65 L230,85 L280,100 L280,110 L30,110 Z\" />\n <path class=\"area-chart-tw__line area-chart-tw__line--declining\" d=\"M30,15 L80,35 L130,50 L180,65 L230,85 L280,100\" />\n <g aria-hidden=\"true\">\n <text x=\"30\" y=\"122\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"middle\">Jan</text>\n <text x=\"80\" y=\"122\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"middle\">Feb</text>\n <text x=\"130\" y=\"122\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"middle\">Mar</text>\n <text x=\"180\" y=\"122\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"middle\">Apr</text>\n <text x=\"230\" y=\"122\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"middle\">May</text>\n <text x=\"280\" y=\"122\" font-size=\"9\" fill=\"#24143099\" text-anchor=\"middle\">Jun</text>\n </g>\n </svg>\n</figure>\n<style>\n.area-chart-tw__fill { fill: var(--accent); fill-opacity: .35; stroke: none; display: none; }\n.area-chart-tw__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; display: none; }\n.area-chart-tw__svg--rising .area-chart-tw__fill--rising, .area-chart-tw__svg--rising .area-chart-tw__line--rising { display: block; }\n.area-chart-tw__svg--volatile .area-chart-tw__fill--volatile, .area-chart-tw__svg--volatile .area-chart-tw__line--volatile { display: block; }\n.area-chart-tw__svg--declining .area-chart-tw__fill--declining, .area-chart-tw__svg--declining .area-chart-tw__line--declining { display: block; }\n</style>", "react": "export function AreaChart({\n trend = \"{{trend}}\",\n accent = \"{{accent}}\",\n showGrid = {{showGrid}},\n height = {{height}},\n}) {\n const shapes = {\n rising: { fill: \"M30,100 L80,85 L130,72 L180,55 L230,35 L280,15 L280,110 L30,110 Z\", line: \"M30,100 L80,85 L130,72 L180,55 L230,35 L280,15\" },\n volatile: { fill: \"M30,60 L80,20 L130,80 L180,30 L230,90 L280,45 L280,110 L30,110 Z\", line: \"M30,60 L80,20 L130,80 L180,30 L230,90 L280,45\" },\n declining: { fill: \"M30,15 L80,35 L130,50 L180,65 L230,85 L280,100 L280,110 L30,110 Z\", line: \"M30,15 L80,35 L130,50 L180,65 L230,85 L280,100\" },\n }[trend];\n const label = \"Area chart of monthly revenue from January to June, showing a \" + trend + \" trend, values between 8 thousand and 48 thousand dollars\";\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, margin: \"0 0 10px\" }}>Monthly revenue &mdash; {trend} trend</figcaption>\n <svg viewBox=\"0 0 300 130\" style={{ width: \"100%\", height, display: \"block\", overflow: \"visible\" }} role=\"img\" aria-label={label}>\n <g aria-hidden=\"true\">\n {showGrid && (\n <>\n <line x1=\"30\" x2=\"300\" y1=\"20\" y2=\"20\" stroke=\"#24143014\" />\n <line x1=\"30\" x2=\"300\" y1=\"55\" y2=\"55\" stroke=\"#24143014\" />\n <line x1=\"30\" x2=\"300\" y1=\"90\" y2=\"90\" stroke=\"#24143014\" />\n </>\n )}\n </g>\n <g aria-hidden=\"true\">\n <text x=\"26\" y=\"24\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"end\">48k</text>\n <text x=\"26\" y=\"59\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"end\">28k</text>\n <text x=\"26\" y=\"94\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"end\">8k</text>\n <line x1=\"30\" y1=\"10\" x2=\"30\" y2=\"110\" stroke=\"#24143055\" />\n <line x1=\"30\" y1=\"110\" x2=\"300\" y2=\"110\" stroke=\"#24143055\" />\n </g>\n <path d={shapes.fill} fill={accent} fillOpacity={0.35} stroke=\"none\" />\n <path d={shapes.line} fill=\"none\" stroke={accent} strokeWidth=\"2.5\" strokeLinejoin=\"round\" strokeLinecap=\"round\" />\n <g aria-hidden=\"true\">\n <text x=\"30\" y=\"122\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"middle\">Jan</text>\n <text x=\"80\" y=\"122\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"middle\">Feb</text>\n <text x=\"130\" y=\"122\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"middle\">Mar</text>\n <text x=\"180\" y=\"122\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"middle\">Apr</text>\n <text x=\"230\" y=\"122\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"middle\">May</text>\n <text x=\"280\" y=\"122\" fontSize=\"9\" fill=\"#24143099\" textAnchor=\"middle\">Jun</text>\n </g>\n </svg>\n </figure>\n );\n}" }