chartlet 0.1.0-alpha.3

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure"><figcaption>Monthly active users</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" role="img" aria-labelledby="chartlet-e8fad53defa9ff08-title chartlet-e8fad53defa9ff08-description" class="chartlet-root"><title id="chartlet-e8fad53defa9ff08-title">Monthly active users</title><desc id="chartlet-e8fad53defa9ff08-description">Usage grew through May. April has no reported value and is shown as a gap.</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}</style><text x="72" y="30" text-anchor="start" class="chartlet-title">Monthly active users</text><line x1="72" y1="368" x2="776" y2="368" class="chartlet-grid"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">1000</text><line x1="72" y1="319.667" x2="776" y2="319.667" class="chartlet-grid"/><text x="62" y="323.667" text-anchor="end" class="chartlet-tick">1200</text><line x1="72" y1="271.333" x2="776" y2="271.333" class="chartlet-grid"/><text x="62" y="275.333" text-anchor="end" class="chartlet-tick">1400</text><line x1="72" y1="223" x2="776" y2="223" class="chartlet-grid"/><text x="62" y="227" text-anchor="end" class="chartlet-tick">1600</text><line x1="72" y1="174.667" x2="776" y2="174.667" class="chartlet-grid"/><text x="62" y="178.667" text-anchor="end" class="chartlet-tick">1800</text><line x1="72" y1="126.333" x2="776" y2="126.333" class="chartlet-grid"/><text x="62" y="130.333" text-anchor="end" class="chartlet-tick">2000</text><line x1="72" y1="78" x2="776" y2="78" class="chartlet-grid"/><text x="62" y="82" text-anchor="end" class="chartlet-tick">2200</text><text x="72" y="58" text-anchor="start" class="chartlet-axis-title">Active users</text><circle cx="78" cy="319.667" r="4" class="chartlet-point"><title>January: 1200</title></circle><text x="78" y="309.667" text-anchor="middle" class="chartlet-value">1200</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">January</text><circle cx="216.4" cy="256.833" r="4" class="chartlet-point"><title>February: 1460</title></circle><text x="216.4" y="246.833" text-anchor="middle" class="chartlet-value">1460</text><text x="216.4" y="392" text-anchor="middle" class="chartlet-label">February</text><circle cx="354.8" cy="273.75" r="4" class="chartlet-point"><title>March: 1390</title></circle><text x="354.8" y="263.75" text-anchor="middle" class="chartlet-value">1390</text><text x="354.8" y="392" text-anchor="middle" class="chartlet-label">March</text><polyline points="78,319.667 216.4,256.833 354.8,273.75" class="chartlet-line"/><text x="493.2" y="392" text-anchor="middle" class="chartlet-label">April</text><circle cx="631.6" cy="172.25" r="4" class="chartlet-point"><title>May: 1810</title></circle><text x="631.6" y="162.25" text-anchor="middle" class="chartlet-value">1810</text><text x="631.6" y="392" text-anchor="middle" class="chartlet-label">May</text><circle cx="770" cy="114.25" r="4" class="chartlet-point"><title>June: 2050</title></circle><text x="770" y="104.25" text-anchor="middle" class="chartlet-value">2050</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">June</text><polyline points="631.6,172.25 770,114.25" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Month</text></svg><p class="chartlet-source">Source: Example data</p><details class="chartlet-data"><summary>Show chart data</summary><table><caption>Data for Monthly active users</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">January</th><td>1200</td></tr><tr><th scope="row">February</th><td>1460</td></tr><tr><th scope="row">March</th><td>1390</td></tr><tr><th scope="row">April</th><td>Missing</td></tr><tr><th scope="row">May</th><td>1810</td></tr><tr><th scope="row">June</th><td>2050</td></tr></tbody></table></details></figure>