chartlet 0.23.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Earthquakes per year by magnitude</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-31cf46813f64aff6" role="img" aria-labelledby="chartlet-31cf46813f64aff6-title chartlet-31cf46813f64aff6-description" class="chartlet-root"><title id="chartlet-31cf46813f64aff6-title">Earthquakes per year by magnitude</title><desc id="chartlet-31cf46813f64aff6-description">Line chart with 5 categories. Highest: 13,000 (4–4.9). Lowest: 1 (8+).</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-31cf46813f64aff6 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-31cf46813f64aff6 .chartlet-label,#chartlet-31cf46813f64aff6 .chartlet-tick,#chartlet-31cf46813f64aff6 .chartlet-value,#chartlet-31cf46813f64aff6 .chartlet-value-inverse,#chartlet-31cf46813f64aff6 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-31cf46813f64aff6 .chartlet-value,#chartlet-31cf46813f64aff6 .chartlet-value-inverse{font-weight:600}#chartlet-31cf46813f64aff6 .chartlet-value{fill:var(--chartlet-text)}#chartlet-31cf46813f64aff6 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-31cf46813f64aff6 .chartlet-axis-title{font-weight:600}#chartlet-31cf46813f64aff6 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-31cf46813f64aff6 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-31cf46813f64aff6 .chartlet-bar,#chartlet-31cf46813f64aff6 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-31cf46813f64aff6 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-31cf46813f64aff6 .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">1</text><line x1="72" y1="290.344" x2="776" y2="290.344" class="chartlet-grid"/><text x="62" y="294.344" text-anchor="end" class="chartlet-tick">10</text><line x1="72" y1="212.688" x2="776" y2="212.688" class="chartlet-grid"/><text x="62" y="216.688" text-anchor="end" class="chartlet-tick">100</text><line x1="72" y1="135.033" x2="776" y2="135.033" class="chartlet-grid"/><text x="62" y="139.033" text-anchor="end" class="chartlet-tick">1,000</text><line x1="72" y1="57.377" x2="776" y2="57.377" class="chartlet-grid"/><text x="62" y="61.377" text-anchor="end" class="chartlet-tick">10,000</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Earthquakes per year</text><circle cx="78" cy="48.528" r="4" class="chartlet-point"><title>4–4.9: 13,000</title></circle><text x="78" y="38.528" text-anchor="middle" class="chartlet-value">13,000</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">4–4.9</text><circle cx="251" cy="126.184" r="4" class="chartlet-point"><title>5–5.9: 1,300</title></circle><text x="251" y="116.184" text-anchor="middle" class="chartlet-value">1,300</text><text x="251" y="392" text-anchor="middle" class="chartlet-label">5–5.9</text><circle cx="424" cy="203.84" r="4" class="chartlet-point"><title>6–6.9: 130</title></circle><text x="424" y="193.84" text-anchor="middle" class="chartlet-value">130</text><text x="424" y="392" text-anchor="middle" class="chartlet-label">6–6.9</text><circle cx="597" cy="276.67" r="4" class="chartlet-point"><title>7–7.9: 15</title></circle><text x="597" y="266.67" text-anchor="middle" class="chartlet-value">15</text><text x="597" y="392" text-anchor="middle" class="chartlet-label">7–7.9</text><circle cx="770" cy="368" r="4" class="chartlet-point"><title>8+: 1</title></circle><text x="770" y="358" text-anchor="middle" class="chartlet-value">1</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">8+</text><polyline points="78,48.528 251,126.184 424,203.84 597,276.67 770,368" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Magnitude</text></svg><p class="chartlet-source">Source: Sample data, rounded</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Earthquakes per year by magnitude</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">4–4.9</th><td>13,000</td></tr><tr><th scope="row">5–5.9</th><td>1,300</td></tr><tr><th scope="row">6–6.9</th><td>130</td></tr><tr><th scope="row">7–7.9</th><td>15</td></tr><tr><th scope="row">8+</th><td>1</td></tr></tbody></table></details></figure>