Edit Line Chart

Name

Also known as (comma separated)

Brief definition Values plotted over time/axis.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "trend", "type": "select", "label": "Trend", "default": "rising", "options": [ "rising", "falling", "flat" ] }, { "id": "showPoints", "type": "toggle", "label": "Show points", "default": true }, { "id": "accent", "type": "color", "label": "Line colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "strokeWidth", "type": "number", "label": "Line thickness", "default": 2.5, "min": 1, "max": 6, "step": 0.5 } ]

Templates (JSON object keyed by format) { "html": "<div class=\"line-chart line-chart--{{trend}}\" style=\"--accent:{{accent}};max-width:320px;\">\n <svg class=\"line-chart__chart\" viewBox=\"0 0 220 122\" role=\"img\" aria-label=\"Line chart showing a {{trend}} trend in revenue, in dollars thousands, across six months from January to June\">\n <line x1=\"10\" y1=\"100\" x2=\"210\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"10\" y1=\"10\" x2=\"10\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <text x=\"4\" y=\"103\" font-size=\"8\" fill=\"#241430\" text-anchor=\"start\">$0k</text>\n <text x=\"4\" y=\"58\" font-size=\"8\" fill=\"#241430\" text-anchor=\"start\">$50k</text>\n <text x=\"4\" y=\"14\" font-size=\"8\" fill=\"#241430\" text-anchor=\"start\">$100k</text>\n <text x=\"10\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Jan</text>\n <text x=\"50\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Feb</text>\n <text x=\"90\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Mar</text>\n <text x=\"130\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Apr</text>\n <text x=\"170\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">May</text>\n <text x=\"210\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Jun</text>\n <polyline class=\"line-chart__line line-chart__line--rising\" points=\"10,90 50,75 90,60 130,45 170,30 210,20\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"{{strokeWidth}}\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline class=\"line-chart__line line-chart__line--falling\" points=\"10,20 50,30 90,45 130,60 170,75 210,90\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"{{strokeWidth}}\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline class=\"line-chart__line line-chart__line--flat\" points=\"10,55 50,58 90,52 130,56 170,54 210,57\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"{{strokeWidth}}\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n {{#if showPoints}}\n <g class=\"line-chart__points line-chart__points--rising\">\n <circle class=\"line-chart__point\" cx=\"10\" cy=\"90\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"50\" cy=\"75\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"90\" cy=\"60\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"130\" cy=\"45\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"170\" cy=\"30\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"210\" cy=\"20\" r=\"3.5\" fill=\"var(--accent)\" />\n </g>\n <g class=\"line-chart__points line-chart__points--falling\">\n <circle class=\"line-chart__point\" cx=\"10\" cy=\"20\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"50\" cy=\"30\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"90\" cy=\"45\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"130\" cy=\"60\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"170\" cy=\"75\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"210\" cy=\"90\" r=\"3.5\" fill=\"var(--accent)\" />\n </g>\n <g class=\"line-chart__points line-chart__points--flat\">\n <circle class=\"line-chart__point\" cx=\"10\" cy=\"55\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"50\" cy=\"58\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"90\" cy=\"52\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"130\" cy=\"56\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"170\" cy=\"54\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart__point\" cx=\"210\" cy=\"57\" r=\"3.5\" fill=\"var(--accent)\" />\n </g>\n {{/if}}\n </svg>\n</div>\n<style>\n.line-chart__chart { display: block; width: 100%; height: auto; }\n.line-chart__line, .line-chart__points { display: none; }\n.line-chart--rising .line-chart__line--rising,\n.line-chart--falling .line-chart__line--falling,\n.line-chart--flat .line-chart__line--flat { display: block; }\n.line-chart--rising .line-chart__points--rising,\n.line-chart--falling .line-chart__points--falling,\n.line-chart--flat .line-chart__points--flat { display: block; }\n</style>", "tailwind": "<div class=\"line-chart-tw line-chart-tw--{{trend}} max-w-[320px]\" style=\"--accent:{{accent}};\">\n <svg class=\"block w-full h-auto\" viewBox=\"0 0 220 122\" role=\"img\" aria-label=\"Line chart showing a {{trend}} trend in revenue, in dollars thousands, across six months from January to June\">\n <line x1=\"10\" y1=\"100\" x2=\"210\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <line x1=\"10\" y1=\"10\" x2=\"10\" y2=\"100\" stroke=\"#241430\" stroke-width=\"1.5\" />\n <text x=\"4\" y=\"103\" font-size=\"8\" fill=\"#241430\" text-anchor=\"start\">$0k</text>\n <text x=\"4\" y=\"58\" font-size=\"8\" fill=\"#241430\" text-anchor=\"start\">$50k</text>\n <text x=\"4\" y=\"14\" font-size=\"8\" fill=\"#241430\" text-anchor=\"start\">$100k</text>\n <text x=\"10\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Jan</text>\n <text x=\"50\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Feb</text>\n <text x=\"90\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Mar</text>\n <text x=\"130\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Apr</text>\n <text x=\"170\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">May</text>\n <text x=\"210\" y=\"112\" font-size=\"8\" fill=\"#241430\" text-anchor=\"middle\">Jun</text>\n <polyline class=\"line-chart-tw__line line-chart-tw__line--rising\" points=\"10,90 50,75 90,60 130,45 170,30 210,20\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"{{strokeWidth}}\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline class=\"line-chart-tw__line line-chart-tw__line--falling\" points=\"10,20 50,30 90,45 130,60 170,75 210,90\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"{{strokeWidth}}\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n <polyline class=\"line-chart-tw__line line-chart-tw__line--flat\" points=\"10,55 50,58 90,52 130,56 170,54 210,57\" fill=\"none\" stroke=\"var(--accent)\" stroke-width=\"{{strokeWidth}}\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n {{#if showPoints}}\n <g class=\"line-chart-tw__points line-chart-tw__points--rising\">\n <circle class=\"line-chart-tw__point\" cx=\"10\" cy=\"90\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"50\" cy=\"75\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"90\" cy=\"60\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"130\" cy=\"45\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"170\" cy=\"30\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"210\" cy=\"20\" r=\"3.5\" fill=\"var(--accent)\" />\n </g>\n <g class=\"line-chart-tw__points line-chart-tw__points--falling\">\n <circle class=\"line-chart-tw__point\" cx=\"10\" cy=\"20\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"50\" cy=\"30\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"90\" cy=\"45\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"130\" cy=\"60\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"170\" cy=\"75\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"210\" cy=\"90\" r=\"3.5\" fill=\"var(--accent)\" />\n </g>\n <g class=\"line-chart-tw__points line-chart-tw__points--flat\">\n <circle class=\"line-chart-tw__point\" cx=\"10\" cy=\"55\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"50\" cy=\"58\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"90\" cy=\"52\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"130\" cy=\"56\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"170\" cy=\"54\" r=\"3.5\" fill=\"var(--accent)\" />\n <circle class=\"line-chart-tw__point\" cx=\"210\" cy=\"57\" r=\"3.5\" fill=\"var(--accent)\" />\n </g>\n {{/if}}\n </svg>\n</div>\n<style>\n.line-chart-tw__line, .line-chart-tw__points { display: none; }\n.line-chart-tw--rising .line-chart-tw__line--rising,\n.line-chart-tw--falling .line-chart-tw__line--falling,\n.line-chart-tw--flat .line-chart-tw__line--flat { display: block; }\n.line-chart-tw--rising .line-chart-tw__points--rising,\n.line-chart-tw--falling .line-chart-tw__points--falling,\n.line-chart-tw--flat .line-chart-tw__points--flat { display: block; }\n</style>", "react": "export function LineChart({\n trend = \"{{trend}}\",\n showPoints = {{showPoints}},\n accent = \"{{accent}}\",\n strokeWidth = {{strokeWidth}},\n}) {\n const xs = [10,50,90,130,170,210];\n const months = [\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\"];\n const trends = {\"rising\":[90,75,60,45,30,20],\"falling\":[20,30,45,60,75,90],\"flat\":[55,58,52,56,54,57]};\n const ys = trends[trend] ?? trends.rising;\n const points = xs.map((x, i) => `${x},${ys[i]}`).join(\" \");\n return (\n <div style={{ maxWidth: 320 }}>\n <svg viewBox=\"0 0 220 122\" role=\"img\" style={{ display: \"block\", width: \"100%\", height: \"auto\" }}\n aria-label={`Line chart showing a ${trend} trend in revenue, in dollars thousands, across six months from January to June`}>\n <line x1={10} y1={100} x2={210} y2={100} stroke=\"#241430\" strokeWidth={1.5} />\n <line x1={10} y1={10} x2={10} y2={100} stroke=\"#241430\" strokeWidth={1.5} />\n <text x={4} y={103} fontSize={8} fill=\"#241430\">$0k</text>\n <text x={4} y={58} fontSize={8} fill=\"#241430\">$50k</text>\n <text x={4} y={14} fontSize={8} fill=\"#241430\">$100k</text>\n {xs.map((x, i) => (\n <text key={x} x={x} y={112} fontSize={8} fill=\"#241430\" textAnchor=\"middle\">{months[i]}</text>\n ))}\n <polyline points={points} fill=\"none\" stroke={accent} strokeWidth={strokeWidth} strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n {showPoints && ys.map((y, i) => (\n <circle key={i} cx={xs[i]} cy={y} r={3.5} fill={accent} />\n ))}\n </svg>\n </div>\n );\n}" }