chartlet 0.7.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Quarterly change</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-7444a2bb2f12ed0b" role="img" aria-labelledby="chartlet-7444a2bb2f12ed0b-title chartlet-7444a2bb2f12ed0b-description" class="chartlet-root"><title id="chartlet-7444a2bb2f12ed0b-title">Quarterly change</title><desc id="chartlet-7444a2bb2f12ed0b-description">Bar chart with 4 categories. Highest: 15% (Fourth quarter). Lowest: −4% (Second quarter).</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-7444a2bb2f12ed0b .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-7444a2bb2f12ed0b .chartlet-label,#chartlet-7444a2bb2f12ed0b .chartlet-tick,#chartlet-7444a2bb2f12ed0b .chartlet-value,#chartlet-7444a2bb2f12ed0b .chartlet-value-inverse,#chartlet-7444a2bb2f12ed0b .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-7444a2bb2f12ed0b .chartlet-value,#chartlet-7444a2bb2f12ed0b .chartlet-value-inverse{font-weight:600}#chartlet-7444a2bb2f12ed0b .chartlet-value{fill:var(--chartlet-text)}#chartlet-7444a2bb2f12ed0b .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-7444a2bb2f12ed0b .chartlet-axis-title{font-weight:600}#chartlet-7444a2bb2f12ed0b .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-7444a2bb2f12ed0b .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-7444a2bb2f12ed0b .chartlet-bar,#chartlet-7444a2bb2f12ed0b .chartlet-point{fill:var(--chartlet-accent)}#chartlet-7444a2bb2f12ed0b .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-7444a2bb2f12ed0b .chartlet-background{fill:var(--chartlet-background)}</style><line x1="210" y1="34" x2="210" y2="394" class="chartlet-grid"/><text x="210" y="416" text-anchor="middle" class="chartlet-tick">−5%</text><line x1="340.5" y1="34" x2="340.5" y2="394" class="chartlet-zero"/><text x="340.5" y="416" text-anchor="middle" class="chartlet-tick">0%</text><line x1="471" y1="34" x2="471" y2="394" class="chartlet-grid"/><text x="471" y="416" text-anchor="middle" class="chartlet-tick">5%</text><line x1="601.5" y1="34" x2="601.5" y2="394" class="chartlet-grid"/><text x="601.5" y="416" text-anchor="middle" class="chartlet-tick">10%</text><line x1="732" y1="34" x2="732" y2="394" class="chartlet-grid"/><text x="732" y="416" text-anchor="middle" class="chartlet-tick">15%</text><text x="471" y="438" text-anchor="middle" class="chartlet-axis-title">Change</text><text x="198" y="14" text-anchor="end" class="chartlet-axis-title">Quarter</text><rect x="340.5" y="50.2" width="313.2" height="57.6" class="chartlet-bar"><title>First quarter: 12%</title></rect><text x="661.7" y="83" text-anchor="start" class="chartlet-value">12%</text><text x="198" y="83" text-anchor="end" class="chartlet-label">First quarter</text><rect x="236.1" y="140.2" width="104.4" height="57.6" class="chartlet-bar"><title>Second quarter: −4%</title></rect><text x="244.1" y="173" text-anchor="start" class="chartlet-value-inverse">−4%</text><text x="198" y="173" text-anchor="end" class="chartlet-label">Second quarter</text><rect x="340.5" y="230.2" width="208.8" height="57.6" class="chartlet-bar"><title>Third quarter with a deliberately long label: 8%</title></rect><text x="557.3" y="263" text-anchor="start" class="chartlet-value">8%</text><text x="198" y="256" text-anchor="end" class="chartlet-label">Third quarter with a</text><text x="198" y="270" text-anchor="end" class="chartlet-label">deliberately long label</text><rect x="340.5" y="320.2" width="391.5" height="57.6" class="chartlet-bar"><title>Fourth quarter: 15%</title></rect><text x="740" y="353" text-anchor="start" class="chartlet-value">15%</text><text x="198" y="353" text-anchor="end" class="chartlet-label">Fourth quarter</text></svg><p class="chartlet-source">Source: Example data</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Quarterly change</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">First quarter</th><td>12%</td></tr><tr><th scope="row">Second quarter</th><td>−4%</td></tr><tr><th scope="row">Third quarter with a deliberately long label</th><td>8%</td></tr><tr><th scope="row">Fourth quarter</th><td>15%</td></tr></tbody></table></details></figure>