chartlet 0.18.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Satisfaction score by plan, with 95 % confidence interval</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="720" height="320" viewBox="0 0 720 320" id="chartlet-2a366ef23cecabca" role="img" aria-labelledby="chartlet-2a366ef23cecabca-title chartlet-2a366ef23cecabca-description" class="chartlet-root"><title id="chartlet-2a366ef23cecabca-title">Satisfaction score by plan, with 95 % confidence interval</title><desc id="chartlet-2a366ef23cecabca-description">Bar chart with 4 categories. Highest: 4.4 (Business). Lowest: 3.4 (Free). Error bars show the interval from lower to upper; the table gives it for every bar.</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-2a366ef23cecabca .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-2a366ef23cecabca .chartlet-label,#chartlet-2a366ef23cecabca .chartlet-tick,#chartlet-2a366ef23cecabca .chartlet-value,#chartlet-2a366ef23cecabca .chartlet-value-inverse,#chartlet-2a366ef23cecabca .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-2a366ef23cecabca .chartlet-value,#chartlet-2a366ef23cecabca .chartlet-value-inverse{font-weight:600}#chartlet-2a366ef23cecabca .chartlet-value{fill:var(--chartlet-text)}#chartlet-2a366ef23cecabca .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-2a366ef23cecabca .chartlet-axis-title{font-weight:600}#chartlet-2a366ef23cecabca .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-2a366ef23cecabca .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-2a366ef23cecabca .chartlet-bar,#chartlet-2a366ef23cecabca .chartlet-point{fill:var(--chartlet-accent)}#chartlet-2a366ef23cecabca .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-2a366ef23cecabca .chartlet-background{fill:var(--chartlet-background)}#chartlet-2a366ef23cecabca .chartlet-error{stroke:var(--chartlet-text);stroke-width:1.5;stroke-linecap:round}</style><line x1="93.4" y1="34" x2="93.4" y2="264" class="chartlet-zero"/><text x="93.4" y="286" text-anchor="middle" class="chartlet-tick">0</text><line x1="205.12" y1="34" x2="205.12" y2="264" class="chartlet-grid"/><text x="205.12" y="286" text-anchor="middle" class="chartlet-tick">1</text><line x1="316.84" y1="34" x2="316.84" y2="264" class="chartlet-grid"/><text x="316.84" y="286" text-anchor="middle" class="chartlet-tick">2</text><line x1="428.56" y1="34" x2="428.56" y2="264" class="chartlet-grid"/><text x="428.56" y="286" text-anchor="middle" class="chartlet-tick">3</text><line x1="540.28" y1="34" x2="540.28" y2="264" class="chartlet-grid"/><text x="540.28" y="286" text-anchor="middle" class="chartlet-tick">4</text><line x1="652" y1="34" x2="652" y2="264" class="chartlet-grid"/><text x="652" y="286" text-anchor="middle" class="chartlet-tick">5</text><text x="372.7" y="308" text-anchor="middle" class="chartlet-axis-title">Score from 1 to 5</text><rect x="93.4" y="44.35" width="379.848" height="36.8" class="chartlet-bar"><title>Free: 3.4 (3.1 to 3.7)</title></rect><line x1="439.732" y1="62.75" x2="506.764" y2="62.75" class="chartlet-error"/><line x1="439.732" y1="54.75" x2="439.732" y2="70.75" class="chartlet-error"/><line x1="506.764" y1="54.75" x2="506.764" y2="70.75" class="chartlet-error"/><text x="514.764" y="66.75" text-anchor="start" class="chartlet-value">3.4</text><text x="81.4" y="66.75" text-anchor="end" class="chartlet-label">Free</text><rect x="93.4" y="101.85" width="458.052" height="36.8" class="chartlet-bar"><title>Team: 4.1 (3.9 to 4.3)</title></rect><line x1="529.108" y1="120.25" x2="573.796" y2="120.25" class="chartlet-error"/><line x1="529.108" y1="112.25" x2="529.108" y2="128.25" class="chartlet-error"/><line x1="573.796" y1="112.25" x2="573.796" y2="128.25" class="chartlet-error"/><text x="581.796" y="124.25" text-anchor="start" class="chartlet-value">4.1</text><text x="81.4" y="124.25" text-anchor="end" class="chartlet-label">Team</text><rect x="93.4" y="159.35" width="491.568" height="36.8" class="chartlet-bar"><title>Business: 4.4 (4 to 4.8)</title></rect><line x1="540.28" y1="177.75" x2="629.656" y2="177.75" class="chartlet-error"/><line x1="540.28" y1="169.75" x2="540.28" y2="185.75" class="chartlet-error"/><line x1="629.656" y1="169.75" x2="629.656" y2="185.75" class="chartlet-error"/><text x="637.656" y="181.75" text-anchor="start" class="chartlet-value">4.4</text><text x="81.4" y="181.75" text-anchor="end" class="chartlet-label">Business</text><rect x="93.4" y="216.85" width="446.88" height="36.8" class="chartlet-bar"><title>Enterprise: 4 (3.3 to 4.7)</title></rect><line x1="462.076" y1="235.25" x2="618.484" y2="235.25" class="chartlet-error"/><line x1="462.076" y1="227.25" x2="462.076" y2="243.25" class="chartlet-error"/><line x1="618.484" y1="227.25" x2="618.484" y2="243.25" class="chartlet-error"/><text x="626.484" y="239.25" text-anchor="start" class="chartlet-value">4</text><text x="81.4" y="239.25" text-anchor="end" class="chartlet-label">Enterprise</text></svg><p class="chartlet-source">Source: Illustrative survey</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Satisfaction score by plan, with 95 % confidence interval</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th><th scope="col">Interval</th></tr></thead><tbody><tr><th scope="row">Free</th><td>3.4</td><td>3.1 to 3.7</td></tr><tr><th scope="row">Team</th><td>4.1</td><td>3.9 to 4.3</td></tr><tr><th scope="row">Business</th><td>4.4</td><td>4 to 4.8</td></tr><tr><th scope="row">Enterprise</th><td>4</td><td>3.3 to 4.7</td></tr></tbody></table></details></figure>