chartlet 0.14.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Signup conversion by page</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-ff861d2ab2ca2f44" role="img" aria-labelledby="chartlet-ff861d2ab2ca2f44-title chartlet-ff861d2ab2ca2f44-description" class="chartlet-root"><title id="chartlet-ff861d2ab2ca2f44-title">Signup conversion by page</title><desc id="chartlet-ff861d2ab2ca2f44-description">The referral page converts best, the blog worst.</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-ff861d2ab2ca2f44 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-ff861d2ab2ca2f44 .chartlet-label,#chartlet-ff861d2ab2ca2f44 .chartlet-tick,#chartlet-ff861d2ab2ca2f44 .chartlet-value,#chartlet-ff861d2ab2ca2f44 .chartlet-value-inverse,#chartlet-ff861d2ab2ca2f44 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-ff861d2ab2ca2f44 .chartlet-value,#chartlet-ff861d2ab2ca2f44 .chartlet-value-inverse{font-weight:600}#chartlet-ff861d2ab2ca2f44 .chartlet-value{fill:var(--chartlet-text)}#chartlet-ff861d2ab2ca2f44 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-ff861d2ab2ca2f44 .chartlet-axis-title{font-weight:600}#chartlet-ff861d2ab2ca2f44 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-ff861d2ab2ca2f44 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-ff861d2ab2ca2f44 .chartlet-bar,#chartlet-ff861d2ab2ca2f44 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-ff861d2ab2ca2f44 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-ff861d2ab2ca2f44 .chartlet-background{fill:var(--chartlet-background)}</style><line x1="88" y1="34" x2="88" y2="394" class="chartlet-zero"/><text x="88" y="416" text-anchor="middle" class="chartlet-tick">0%</text><line x1="249" y1="34" x2="249" y2="394" class="chartlet-grid"/><text x="249" y="416" text-anchor="middle" class="chartlet-tick">2%</text><line x1="410" y1="34" x2="410" y2="394" class="chartlet-grid"/><text x="410" y="416" text-anchor="middle" class="chartlet-tick">4%</text><line x1="571" y1="34" x2="571" y2="394" class="chartlet-grid"/><text x="571" y="416" text-anchor="middle" class="chartlet-tick">6%</text><line x1="732" y1="34" x2="732" y2="394" class="chartlet-grid"/><text x="732" y="416" text-anchor="middle" class="chartlet-tick">8%</text><text x="410" y="438" text-anchor="middle" class="chartlet-axis-title">Conversion rate</text><text x="76" y="14" text-anchor="end" class="chartlet-axis-title">Page</text><rect x="88" y="46.96" width="338.1" height="46.08" class="chartlet-bar"><title>Pricing: 4.2%</title></rect><text x="434.1" y="74" text-anchor="start" class="chartlet-value">4.2%</text><text x="76" y="74" text-anchor="end" class="chartlet-label">Pricing</text><rect x="88" y="118.96" width="491.05" height="46.08" class="chartlet-bar"><title>Home: 6.1%</title></rect><text x="587.05" y="146" text-anchor="start" class="chartlet-value">6.1%</text><text x="76" y="146" text-anchor="end" class="chartlet-label">Home</text><rect x="88" y="190.96" width="305.9" height="46.08" class="chartlet-bar"><title>Docs: 3.8%</title></rect><text x="401.9" y="218" text-anchor="start" class="chartlet-value">3.8%</text><text x="76" y="218" text-anchor="end" class="chartlet-label">Docs</text><rect x="88" y="262.96" width="442.75" height="46.08" class="chartlet-bar"><title>Blog: 5.5%</title></rect><text x="538.75" y="290" text-anchor="start" class="chartlet-value">5.5%</text><text x="76" y="290" text-anchor="end" class="chartlet-label">Blog</text><rect x="88" y="334.96" width="595.7" height="46.08" class="chartlet-bar"><title>Referral: 7.4%</title></rect><text x="691.7" y="362" text-anchor="start" class="chartlet-value">7.4%</text><text x="76" y="362" text-anchor="end" class="chartlet-label">Referral</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 Signup conversion by page</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">Pricing</th><td>4.2%</td></tr><tr><th scope="row">Home</th><td>6.1%</td></tr><tr><th scope="row">Docs</th><td>3.8%</td></tr><tr><th scope="row">Blog</th><td>5.5%</td></tr><tr><th scope="row">Referral</th><td>7.4%</td></tr></tbody></table></details></figure>