chartlet 0.23.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><figure class="chartlet-figure" data-viz="chart"><figcaption>Feature priorities: impact against effort</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" id="chartlet-a41c0f286e41d878" role="img" aria-labelledby="chartlet-a41c0f286e41d878-title chartlet-a41c0f286e41d878-description" class="chartlet-root"><title id="chartlet-a41c0f286e41d878-title">Feature priorities: impact against effort</title><desc id="chartlet-a41c0f286e41d878-description">Scatter plot of 10 points: x from 1.5 to 8.6, y from 1.8 to 9.1. Quadrants divided at x = 5 and y = 5. Top left, Quick wins: 3 points (Single sign-on, Saved filters, Bulk export). Top right, Major projects: 3 points (Analytics dashboard, Offline mode, Usage-based billing). Bottom left, Fill-ins: 2 points (New icons, Keyboard shortcuts). Bottom right, Thankless tasks: 2 points (Dark mode, Legacy import).</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-a41c0f286e41d878 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-a41c0f286e41d878 .chartlet-label,#chartlet-a41c0f286e41d878 .chartlet-tick,#chartlet-a41c0f286e41d878 .chartlet-value,#chartlet-a41c0f286e41d878 .chartlet-value-inverse,#chartlet-a41c0f286e41d878 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-a41c0f286e41d878 .chartlet-value,#chartlet-a41c0f286e41d878 .chartlet-value-inverse{font-weight:600}#chartlet-a41c0f286e41d878 .chartlet-value{fill:var(--chartlet-text)}#chartlet-a41c0f286e41d878 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-a41c0f286e41d878 .chartlet-axis-title{font-weight:600}#chartlet-a41c0f286e41d878 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-a41c0f286e41d878 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-a41c0f286e41d878 .chartlet-bar,#chartlet-a41c0f286e41d878 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-a41c0f286e41d878 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-a41c0f286e41d878 .chartlet-background{fill:var(--chartlet-background)}#chartlet-a41c0f286e41d878 .chartlet-sc-1{fill:var(--chartlet-color-1)}#chartlet-a41c0f286e41d878 .chartlet-sc-2{fill:var(--chartlet-color-2)}#chartlet-a41c0f286e41d878 .chartlet-sc-3{fill:var(--chartlet-color-3)}#chartlet-a41c0f286e41d878 .chartlet-sc-4{fill:var(--chartlet-color-4)}#chartlet-a41c0f286e41d878 .chartlet-sc-dot{fill-opacity:.65;stroke:none}#chartlet-a41c0f286e41d878 .chartlet-sc-swatch{stroke:none;rx:5px}#chartlet-a41c0f286e41d878 .chartlet-sc-fit{stroke-width:2;fill:none}#chartlet-a41c0f286e41d878 .chartlet-sc-fit.chartlet-sc-1{stroke:var(--chartlet-color-1)}#chartlet-a41c0f286e41d878 .chartlet-sc-fit.chartlet-sc-2{stroke:var(--chartlet-color-2)}#chartlet-a41c0f286e41d878 .chartlet-sc-fit.chartlet-sc-3{stroke:var(--chartlet-color-3)}#chartlet-a41c0f286e41d878 .chartlet-sc-fit.chartlet-sc-4{stroke:var(--chartlet-color-4)}#chartlet-a41c0f286e41d878 .chartlet-sc-line{stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-a41c0f286e41d878 .chartlet-sc-label{font-size:11px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-a41c0f286e41d878 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}</style><line x1="72" y1="458" x2="776" y2="458" class="chartlet-zero"/><text x="62" y="462" text-anchor="end" class="chartlet-tick">0</text><line x1="72" y1="370.4" x2="776" y2="370.4" class="chartlet-grid"/><text x="62" y="374.4" text-anchor="end" class="chartlet-tick">2</text><line x1="72" y1="282.8" x2="776" y2="282.8" class="chartlet-grid"/><text x="62" y="286.8" text-anchor="end" class="chartlet-tick">4</text><line x1="72" y1="195.2" x2="776" y2="195.2" class="chartlet-grid"/><text x="62" y="199.2" text-anchor="end" class="chartlet-tick">6</text><line x1="72" y1="107.6" x2="776" y2="107.6" class="chartlet-grid"/><text x="62" y="111.6" text-anchor="end" class="chartlet-tick">8</text><line x1="72" y1="20" x2="776" y2="20" class="chartlet-grid"/><text x="62" y="24" text-anchor="end" class="chartlet-tick">10</text><line x1="72" y1="20" x2="72" y2="458" class="chartlet-zero"/><text x="72" y="480" text-anchor="middle" class="chartlet-tick">0</text><line x1="212.8" y1="20" x2="212.8" y2="458" class="chartlet-grid"/><text x="212.8" y="480" text-anchor="middle" class="chartlet-tick">2</text><line x1="353.6" y1="20" x2="353.6" y2="458" class="chartlet-grid"/><text x="353.6" y="480" text-anchor="middle" class="chartlet-tick">4</text><line x1="494.4" y1="20" x2="494.4" y2="458" class="chartlet-grid"/><text x="494.4" y="480" text-anchor="middle" class="chartlet-tick">6</text><line x1="635.2" y1="20" x2="635.2" y2="458" class="chartlet-grid"/><text x="635.2" y="480" text-anchor="middle" class="chartlet-tick">8</text><line x1="776" y1="20" x2="776" y2="458" class="chartlet-grid"/><text x="776" y="480" text-anchor="middle" class="chartlet-tick">10</text><text x="424" y="502" text-anchor="middle" class="chartlet-axis-title">Effort</text><text x="72" y="10" text-anchor="start" class="chartlet-axis-title">Impact</text><line x1="424" y1="20" x2="424" y2="458" class="chartlet-zero"/><line x1="72" y1="239" x2="776" y2="239" class="chartlet-zero"/><text x="78" y="37" text-anchor="start" class="chartlet-axis-title">Quick wins</text><text x="770" y="37" text-anchor="end" class="chartlet-axis-title">Major projects</text><text x="78" y="449" text-anchor="start" class="chartlet-axis-title">Fill-ins</text><text x="770" y="449" text-anchor="end" class="chartlet-axis-title">Thankless tasks</text><circle cx="600" cy="98.84" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Analytics dashboard: 7.5, 8.2</title></circle><circle cx="248" cy="68.18" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Single sign-on: 2.5, 8.9</title></circle><circle cx="318.4" cy="151.4" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Saved filters: 3.5, 7</title></circle><circle cx="177.6" cy="186.44" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Bulk export: 1.5, 6.2</title></circle><circle cx="677.44" cy="177.68" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Offline mode: 8.6, 6.4</title></circle><circle cx="508.48" cy="317.84" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Dark mode: 6.2, 3.2</title></circle><circle cx="649.28" cy="379.16" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Legacy import: 8.2, 1.8</title></circle><circle cx="198.72" cy="352.88" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>New icons: 1.8, 2.4</title></circle><circle cx="339.52" cy="282.8" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Keyboard shortcuts: 3.8, 4</title></circle><circle cx="480.32" cy="59.42" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Usage-based billing: 5.8, 9.1</title></circle><text x="607" y="102.84" text-anchor="start" class="chartlet-sc-label">Analytics dashboard</text><text x="255" y="72.18" text-anchor="start" class="chartlet-sc-label">Single sign-on</text><text x="325.4" y="155.4" text-anchor="start" class="chartlet-sc-label">Saved filters</text><text x="184.6" y="190.44" text-anchor="start" class="chartlet-sc-label">Bulk export</text><text x="684.44" y="181.68" text-anchor="start" class="chartlet-sc-label">Offline mode</text><text x="515.48" y="321.84" text-anchor="start" class="chartlet-sc-label">Dark mode</text><text x="656.28" y="383.16" text-anchor="start" class="chartlet-sc-label">Legacy import</text><text x="205.72" y="356.88" text-anchor="start" class="chartlet-sc-label">New icons</text><text x="346.52" y="286.8" text-anchor="start" class="chartlet-sc-label">Keyboard shortcuts</text><text x="487.32" y="63.42" text-anchor="start" class="chartlet-sc-label">Usage-based billing</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="480" viewBox="0 0 400 480" id="chartlet-a41c0f286e41d878-m" role="img" aria-labelledby="chartlet-a41c0f286e41d878-m-title chartlet-a41c0f286e41d878-m-description" class="chartlet-root"><title id="chartlet-a41c0f286e41d878-m-title">Feature priorities: impact against effort</title><desc id="chartlet-a41c0f286e41d878-m-description">Scatter plot of 10 points: x from 1.5 to 8.6, y from 1.8 to 9.1. Quadrants divided at x = 5 and y = 5. Top left, Quick wins: 3 points (Single sign-on, Saved filters, Bulk export). Top right, Major projects: 3 points (Analytics dashboard, Offline mode, Usage-based billing). Bottom left, Fill-ins: 2 points (New icons, Keyboard shortcuts). Bottom right, Thankless tasks: 2 points (Dark mode, Legacy import).</desc><style>.chartlet-root{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-a41c0f286e41d878-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-a41c0f286e41d878-m .chartlet-label,#chartlet-a41c0f286e41d878-m .chartlet-tick,#chartlet-a41c0f286e41d878-m .chartlet-value,#chartlet-a41c0f286e41d878-m .chartlet-value-inverse,#chartlet-a41c0f286e41d878-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-a41c0f286e41d878-m .chartlet-value,#chartlet-a41c0f286e41d878-m .chartlet-value-inverse{font-weight:600}#chartlet-a41c0f286e41d878-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-a41c0f286e41d878-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-a41c0f286e41d878-m .chartlet-axis-title{font-weight:600}#chartlet-a41c0f286e41d878-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-a41c0f286e41d878-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-a41c0f286e41d878-m .chartlet-bar,#chartlet-a41c0f286e41d878-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-a41c0f286e41d878-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-a41c0f286e41d878-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-a41c0f286e41d878-m .chartlet-sc-1{fill:var(--chartlet-color-1)}#chartlet-a41c0f286e41d878-m .chartlet-sc-2{fill:var(--chartlet-color-2)}#chartlet-a41c0f286e41d878-m .chartlet-sc-3{fill:var(--chartlet-color-3)}#chartlet-a41c0f286e41d878-m .chartlet-sc-4{fill:var(--chartlet-color-4)}#chartlet-a41c0f286e41d878-m .chartlet-sc-dot{fill-opacity:.65;stroke:none}#chartlet-a41c0f286e41d878-m .chartlet-sc-swatch{stroke:none;rx:5px}#chartlet-a41c0f286e41d878-m .chartlet-sc-fit{stroke-width:2;fill:none}#chartlet-a41c0f286e41d878-m .chartlet-sc-fit.chartlet-sc-1{stroke:var(--chartlet-color-1)}#chartlet-a41c0f286e41d878-m .chartlet-sc-fit.chartlet-sc-2{stroke:var(--chartlet-color-2)}#chartlet-a41c0f286e41d878-m .chartlet-sc-fit.chartlet-sc-3{stroke:var(--chartlet-color-3)}#chartlet-a41c0f286e41d878-m .chartlet-sc-fit.chartlet-sc-4{stroke:var(--chartlet-color-4)}#chartlet-a41c0f286e41d878-m .chartlet-sc-line{stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-a41c0f286e41d878-m .chartlet-sc-label{font-size:11px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-a41c0f286e41d878-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-a41c0f286e41d878-m .chartlet-title-small{font-size:18px}</style><line x1="72" y1="418" x2="376" y2="418" class="chartlet-zero"/><text x="62" y="422" text-anchor="end" class="chartlet-tick">0</text><line x1="72" y1="338.4" x2="376" y2="338.4" class="chartlet-grid"/><text x="62" y="342.4" text-anchor="end" class="chartlet-tick">2</text><line x1="72" y1="258.8" x2="376" y2="258.8" class="chartlet-grid"/><text x="62" y="262.8" text-anchor="end" class="chartlet-tick">4</text><line x1="72" y1="179.2" x2="376" y2="179.2" class="chartlet-grid"/><text x="62" y="183.2" text-anchor="end" class="chartlet-tick">6</text><line x1="72" y1="99.6" x2="376" y2="99.6" class="chartlet-grid"/><text x="62" y="103.6" text-anchor="end" class="chartlet-tick">8</text><line x1="72" y1="20" x2="376" y2="20" class="chartlet-grid"/><text x="62" y="24" text-anchor="end" class="chartlet-tick">10</text><line x1="72" y1="20" x2="72" y2="418" class="chartlet-zero"/><text x="72" y="440" text-anchor="middle" class="chartlet-tick">0</text><line x1="132.8" y1="20" x2="132.8" y2="418" class="chartlet-grid"/><text x="132.8" y="440" text-anchor="middle" class="chartlet-tick">2</text><line x1="193.6" y1="20" x2="193.6" y2="418" class="chartlet-grid"/><text x="193.6" y="440" text-anchor="middle" class="chartlet-tick">4</text><line x1="254.4" y1="20" x2="254.4" y2="418" class="chartlet-grid"/><text x="254.4" y="440" text-anchor="middle" class="chartlet-tick">6</text><line x1="315.2" y1="20" x2="315.2" y2="418" class="chartlet-grid"/><text x="315.2" y="440" text-anchor="middle" class="chartlet-tick">8</text><line x1="376" y1="20" x2="376" y2="418" class="chartlet-grid"/><text x="376" y="440" text-anchor="middle" class="chartlet-tick">10</text><text x="224" y="462" text-anchor="middle" class="chartlet-axis-title">Effort</text><text x="72" y="10" text-anchor="start" class="chartlet-axis-title">Impact</text><line x1="224" y1="20" x2="224" y2="418" class="chartlet-zero"/><line x1="72" y1="219" x2="376" y2="219" class="chartlet-zero"/><text x="78" y="37" text-anchor="start" class="chartlet-axis-title">Quick wins</text><text x="370" y="37" text-anchor="end" class="chartlet-axis-title">Major projects</text><text x="78" y="409" text-anchor="start" class="chartlet-axis-title">Fill-ins</text><text x="370" y="409" text-anchor="end" class="chartlet-axis-title">Thankless tasks</text><circle cx="300" cy="91.64" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Analytics dashboard: 7.5, 8.2</title></circle><circle cx="148" cy="63.78" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Single sign-on: 2.5, 8.9</title></circle><circle cx="178.4" cy="139.4" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Saved filters: 3.5, 7</title></circle><circle cx="117.6" cy="171.24" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Bulk export: 1.5, 6.2</title></circle><circle cx="333.44" cy="163.28" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Offline mode: 8.6, 6.4</title></circle><circle cx="260.48" cy="290.64" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Dark mode: 6.2, 3.2</title></circle><circle cx="321.28" cy="346.36" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Legacy import: 8.2, 1.8</title></circle><circle cx="126.72" cy="322.48" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>New icons: 1.8, 2.4</title></circle><circle cx="187.52" cy="258.8" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Keyboard shortcuts: 3.8, 4</title></circle><circle cx="248.32" cy="55.82" r="3.5" class="chartlet-sc-dot chartlet-sc-1"><title>Usage-based billing: 5.8, 9.1</title></circle><text x="293" y="95.64" text-anchor="end" class="chartlet-sc-label">Analytics dashboard</text><text x="155" y="67.78" text-anchor="start" class="chartlet-sc-label">Single sign-on</text><text x="185.4" y="143.4" text-anchor="start" class="chartlet-sc-label">Saved filters</text><text x="124.6" y="175.24" text-anchor="start" class="chartlet-sc-label">Bulk export</text><text x="326.44" y="167.28" text-anchor="end" class="chartlet-sc-label">Offline mode</text><text x="267.48" y="294.64" text-anchor="start" class="chartlet-sc-label">Dark mode</text><text x="314.28" y="350.36" text-anchor="end" class="chartlet-sc-label">Legacy import</text><text x="133.72" y="326.48" text-anchor="start" class="chartlet-sc-label">New icons</text><text x="194.52" y="262.8" text-anchor="start" class="chartlet-sc-label">Keyboard shortcuts</text><text x="255.32" y="59.82" text-anchor="start" class="chartlet-sc-label">Usage-based billing</text></svg></div><p class="chartlet-source">Source: Team estimates on a scale of 1 to 10, illustrative</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Feature priorities: impact against effort</caption><thead><tr><th scope="col">Point</th><th scope="col">Effort</th><th scope="col">Impact</th><th scope="col">Quadrant</th></tr></thead><tbody><tr><th scope="row">Analytics dashboard</th><td>7.5</td><td>8.2</td><td>Major projects</td></tr><tr><th scope="row">Single sign-on</th><td>2.5</td><td>8.9</td><td>Quick wins</td></tr><tr><th scope="row">Saved filters</th><td>3.5</td><td>7</td><td>Quick wins</td></tr><tr><th scope="row">Bulk export</th><td>1.5</td><td>6.2</td><td>Quick wins</td></tr><tr><th scope="row">Offline mode</th><td>8.6</td><td>6.4</td><td>Major projects</td></tr><tr><th scope="row">Dark mode</th><td>6.2</td><td>3.2</td><td>Thankless tasks</td></tr><tr><th scope="row">Legacy import</th><td>8.2</td><td>1.8</td><td>Thankless tasks</td></tr><tr><th scope="row">New icons</th><td>1.8</td><td>2.4</td><td>Fill-ins</td></tr><tr><th scope="row">Keyboard shortcuts</th><td>3.8</td><td>4</td><td>Fill-ins</td></tr><tr><th scope="row">Usage-based billing</th><td>5.8</td><td>9.1</td><td>Major projects</td></tr></tbody></table></details></figure></div>