chartlet 0.1.0-alpha.3

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper"><fieldset class="chartlet-filter"><legend>Series</legend><label><input type="checkbox" class="series-0" checked> 2025</label><label><input type="checkbox" class="series-1" checked> 2026</label></fieldset><figure class="chartlet-figure"><figcaption>Customer satisfaction by region</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" role="img" aria-labelledby="chartlet-befb5f13f35cb016-title chartlet-befb5f13f35cb016-description" class="chartlet-root"><title id="chartlet-befb5f13f35cb016-title">Customer satisfaction by region</title><desc id="chartlet-befb5f13f35cb016-description">Satisfaction improved in every region from 2025 to 2026.</desc><style>.chartlet-root{max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172033}.chartlet-title{font-size:22px;font-weight:650;fill:#172033}.chartlet-label,.chartlet-tick,.chartlet-value,.chartlet-value-inverse,.chartlet-axis-title{font-size:12px;fill:#344054}.chartlet-value,.chartlet-value-inverse{font-weight:600}.chartlet-value{fill:#172033}.chartlet-value-inverse{fill:#fff}.chartlet-axis-title{font-weight:600}.chartlet-grid{stroke:#d9dee8;stroke-width:1}.chartlet-zero{stroke:#667085;stroke-width:1.5}.chartlet-bar,.chartlet-point{fill:#2563eb}.chartlet-line{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chartlet-legend{font-size:12px;fill:#344054}.chartlet-series-1{fill:#2563eb}.chartlet-series-2{fill:#c2410c}.chartlet-series-3{fill:#475569}.chartlet-series-4{fill:#111827}.chartlet-wrapper{display:inline-block;max-width:100%}.chartlet-filter{border:none;padding:0;margin:0 0 12px 0}.chartlet-filter legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-filter label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-filter input{margin-right:4px}.chartlet-filter input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-filter input.series-0:not(:checked)) .chartlet-root [data-series="0"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-1:not(:checked)) .chartlet-root [data-series="1"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-2:not(:checked)) .chartlet-root [data-series="2"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-3:not(:checked)) .chartlet-root [data-series="3"]{display:none}</style><text x="88" y="30" text-anchor="start" class="chartlet-title">Customer satisfaction by region</text><line x1="88" y1="102" x2="88" y2="394" class="chartlet-zero"/><text x="88" y="416" text-anchor="middle" class="chartlet-tick">0</text><line x1="216.8" y1="102" x2="216.8" y2="394" class="chartlet-grid"/><text x="216.8" y="416" text-anchor="middle" class="chartlet-tick">1</text><line x1="345.6" y1="102" x2="345.6" y2="394" class="chartlet-grid"/><text x="345.6" y="416" text-anchor="middle" class="chartlet-tick">2</text><line x1="474.4" y1="102" x2="474.4" y2="394" class="chartlet-grid"/><text x="474.4" y="416" text-anchor="middle" class="chartlet-tick">3</text><line x1="603.2" y1="102" x2="603.2" y2="394" class="chartlet-grid"/><text x="603.2" y="416" text-anchor="middle" class="chartlet-tick">4</text><line x1="732" y1="102" x2="732" y2="394" class="chartlet-grid"/><text x="732" y="416" text-anchor="middle" class="chartlet-tick">5</text><text x="410" y="438" text-anchor="middle" class="chartlet-axis-title">Score out of 5</text><text x="76" y="82" text-anchor="end" class="chartlet-axis-title">Region</text><rect x="88" y="46" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="104" y="55" text-anchor="start" class="chartlet-legend">2025</text><rect x="150.88" y="46" width="10" height="10" class="chartlet-bar chartlet-series-2"/><text x="166.88" y="55" text-anchor="start" class="chartlet-legend">2026</text><rect data-series="0" x="88" y="111.3" width="528.08" height="25.2" class="chartlet-bar chartlet-series-1"><title>North – 2025: 4.1</title></rect><text data-series="0" x="624.08" y="127.9" text-anchor="start" class="chartlet-value">4.1</text><rect data-series="1" x="88" y="140.5" width="553.84" height="25.2" class="chartlet-bar chartlet-series-2"><title>North – 2026: 4.3</title></rect><text data-series="1" x="649.84" y="157.1" text-anchor="start" class="chartlet-value">4.3</text><text x="76" y="142.5" text-anchor="end" class="chartlet-label">North</text><rect data-series="0" x="88" y="184.3" width="553.84" height="25.2" class="chartlet-bar chartlet-series-1"><title>South – 2025: 4.3</title></rect><text data-series="0" x="649.84" y="200.9" text-anchor="start" class="chartlet-value">4.3</text><rect data-series="1" x="88" y="213.5" width="566.72" height="25.2" class="chartlet-bar chartlet-series-2"><title>South – 2026: 4.4</title></rect><text data-series="1" x="662.72" y="230.1" text-anchor="start" class="chartlet-value">4.4</text><text x="76" y="215.5" text-anchor="end" class="chartlet-label">South</text><rect data-series="0" x="88" y="257.3" width="502.32" height="25.2" class="chartlet-bar chartlet-series-1"><title>East – 2025: 3.9</title></rect><text data-series="0" x="598.32" y="273.9" text-anchor="start" class="chartlet-value">3.9</text><rect data-series="1" x="88" y="286.5" width="528.08" height="25.2" class="chartlet-bar chartlet-series-2"><title>East – 2026: 4.1</title></rect><text data-series="1" x="624.08" y="303.1" text-anchor="start" class="chartlet-value">4.1</text><text x="76" y="288.5" text-anchor="end" class="chartlet-label">East</text><rect data-series="0" x="88" y="330.3" width="566.72" height="25.2" class="chartlet-bar chartlet-series-1"><title>West – 2025: 4.4</title></rect><text data-series="0" x="662.72" y="346.9" text-anchor="start" class="chartlet-value">4.4</text><rect data-series="1" x="88" y="359.5" width="592.48" height="25.2" class="chartlet-bar chartlet-series-2"><title>West – 2026: 4.6</title></rect><text data-series="1" x="688.48" y="376.1" text-anchor="start" class="chartlet-value">4.6</text><text x="76" y="361.5" text-anchor="end" class="chartlet-label">West</text></svg><p class="chartlet-source">Source: Example data</p><details class="chartlet-data"><summary>Show chart data</summary><table><caption>Data for Customer satisfaction by region</caption><thead><tr><th scope="col">Category</th><th scope="col">2025</th><th scope="col">2026</th></tr></thead><tbody><tr><th scope="row">North</th><td>4.1</td><td>4.3</td></tr><tr><th scope="row">South</th><td>4.3</td><td>4.4</td></tr><tr><th scope="row">East</th><td>3.9</td><td>4.1</td></tr><tr><th scope="row">West</th><td>4.4</td><td>4.6</td></tr></tbody></table></details></figure></div>