chartlet 0.3.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Monthly active users</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-e8fad53defa9ff08" 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{--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-e8fad53defa9ff08 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-e8fad53defa9ff08 .chartlet-label,#chartlet-e8fad53defa9ff08 .chartlet-tick,#chartlet-e8fad53defa9ff08 .chartlet-value,#chartlet-e8fad53defa9ff08 .chartlet-value-inverse,#chartlet-e8fad53defa9ff08 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-e8fad53defa9ff08 .chartlet-value,#chartlet-e8fad53defa9ff08 .chartlet-value-inverse{font-weight:600}#chartlet-e8fad53defa9ff08 .chartlet-value{fill:var(--chartlet-text)}#chartlet-e8fad53defa9ff08 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-e8fad53defa9ff08 .chartlet-axis-title{font-weight:600}#chartlet-e8fad53defa9ff08 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-e8fad53defa9ff08 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-e8fad53defa9ff08 .chartlet-bar,#chartlet-e8fad53defa9ff08 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-e8fad53defa9ff08 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-e8fad53defa9ff08 .chartlet-background{fill:var(--chartlet-background)}</style><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="312.333" x2="776" y2="312.333" class="chartlet-grid"/><text x="62" y="316.333" text-anchor="end" class="chartlet-tick">1200</text><line x1="72" y1="256.667" x2="776" y2="256.667" class="chartlet-grid"/><text x="62" y="260.667" text-anchor="end" class="chartlet-tick">1400</text><line x1="72" y1="201" x2="776" y2="201" class="chartlet-grid"/><text x="62" y="205" text-anchor="end" class="chartlet-tick">1600</text><line x1="72" y1="145.333" x2="776" y2="145.333" class="chartlet-grid"/><text x="62" y="149.333" text-anchor="end" class="chartlet-tick">1800</text><line x1="72" y1="89.667" x2="776" y2="89.667" class="chartlet-grid"/><text x="62" y="93.667" text-anchor="end" class="chartlet-tick">2000</text><line x1="72" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">2200</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Active users</text><circle cx="78" cy="312.333" r="4" class="chartlet-point"><title>January: 1200</title></circle><text x="78" y="302.333" 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="239.967" r="4" class="chartlet-point"><title>February: 1460</title></circle><text x="216.4" y="229.967" 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="259.45" r="4" class="chartlet-point"><title>March: 1390</title></circle><text x="354.8" y="249.45" 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,312.333 216.4,239.967 354.8,259.45" class="chartlet-line"/><text x="493.2" y="392" text-anchor="middle" class="chartlet-label">April</text><circle cx="631.6" cy="142.55" r="4" class="chartlet-point"><title>May: 1810</title></circle><text x="631.6" y="132.55" 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="75.75" r="4" class="chartlet-point"><title>June: 2050</title></circle><text x="770" y="65.75" 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,142.55 770,75.75" 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" data-viz-text><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>