chartlet 0.16.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><figure class="chartlet-figure" data-viz="chart"><figcaption>Mean satisfaction by month, with 95 % confidence interval</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="720" height="380" viewBox="0 0 720 380" id="chartlet-36a5fad95253f52a" role="img" aria-labelledby="chartlet-36a5fad95253f52a-title chartlet-36a5fad95253f52a-description" class="chartlet-root"><title id="chartlet-36a5fad95253f52a-title">Mean satisfaction by month, with 95 % confidence interval</title><desc id="chartlet-36a5fad95253f52a-description">Line chart with 6 categories. Highest: 4.2 (Jun). Lowest: 3.1 (Jan). Error bars show the interval from lower to upper; the table gives it for every point.</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-36a5fad95253f52a .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-36a5fad95253f52a .chartlet-label,#chartlet-36a5fad95253f52a .chartlet-tick,#chartlet-36a5fad95253f52a .chartlet-value,#chartlet-36a5fad95253f52a .chartlet-value-inverse,#chartlet-36a5fad95253f52a .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-36a5fad95253f52a .chartlet-value,#chartlet-36a5fad95253f52a .chartlet-value-inverse{font-weight:600}#chartlet-36a5fad95253f52a .chartlet-value{fill:var(--chartlet-text)}#chartlet-36a5fad95253f52a .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-36a5fad95253f52a .chartlet-axis-title{font-weight:600}#chartlet-36a5fad95253f52a .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-36a5fad95253f52a .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-36a5fad95253f52a .chartlet-bar,#chartlet-36a5fad95253f52a .chartlet-point{fill:var(--chartlet-accent)}#chartlet-36a5fad95253f52a .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-36a5fad95253f52a .chartlet-background{fill:var(--chartlet-background)}#chartlet-36a5fad95253f52a .chartlet-error{stroke:var(--chartlet-text);stroke-width:1.5;stroke-linecap:round}</style><line x1="72" y1="318" x2="696" y2="318" class="chartlet-grid"/><text x="62" y="322" text-anchor="end" class="chartlet-tick">2.5</text><line x1="72" y1="261.2" x2="696" y2="261.2" class="chartlet-grid"/><text x="62" y="265.2" text-anchor="end" class="chartlet-tick">3.0</text><line x1="72" y1="204.4" x2="696" y2="204.4" class="chartlet-grid"/><text x="62" y="208.4" text-anchor="end" class="chartlet-tick">3.5</text><line x1="72" y1="147.6" x2="696" y2="147.6" class="chartlet-grid"/><text x="62" y="151.6" text-anchor="end" class="chartlet-tick">4.0</text><line x1="72" y1="90.8" x2="696" y2="90.8" class="chartlet-grid"/><text x="62" y="94.8" text-anchor="end" class="chartlet-tick">4.5</text><line x1="72" y1="34" x2="696" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">5.0</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Score from 1 to 5</text><line x1="78" y1="295.28" x2="78" y2="204.4" class="chartlet-error"/><line x1="75" y1="295.28" x2="81" y2="295.28" class="chartlet-error"/><line x1="75" y1="204.4" x2="81" y2="204.4" class="chartlet-error"/><circle cx="78" cy="249.84" r="4" class="chartlet-point"><title>Jan: 3.1 (2.7 to 3.5)</title></circle><text x="78" y="194.4" text-anchor="middle" class="chartlet-value">3.1</text><text x="78" y="342" text-anchor="middle" class="chartlet-label">Jan</text><line x1="200.4" y1="261.2" x2="200.4" y2="158.96" class="chartlet-error"/><line x1="197.4" y1="261.2" x2="203.4" y2="261.2" class="chartlet-error"/><line x1="197.4" y1="158.96" x2="203.4" y2="158.96" class="chartlet-error"/><circle cx="200.4" cy="215.76" r="4" class="chartlet-point"><title>Feb: 3.4 (3 to 3.9)</title></circle><text x="200.4" y="148.96" text-anchor="middle" class="chartlet-value">3.4</text><text x="200.4" y="342" text-anchor="middle" class="chartlet-label">Feb</text><line x1="322.8" y1="204.4" x2="322.8" y2="124.88" class="chartlet-error"/><line x1="319.8" y1="204.4" x2="325.8" y2="204.4" class="chartlet-error"/><line x1="319.8" y1="124.88" x2="325.8" y2="124.88" class="chartlet-error"/><circle cx="322.8" cy="158.96" r="4" class="chartlet-point"><title>Mar: 3.9 (3.5 to 4.2)</title></circle><text x="322.8" y="114.88" text-anchor="middle" class="chartlet-value">3.9</text><text x="322.8" y="342" text-anchor="middle" class="chartlet-label">Mar</text><line x1="445.2" y1="238.48" x2="445.2" y2="136.24" class="chartlet-error"/><line x1="442.2" y1="238.48" x2="448.2" y2="238.48" class="chartlet-error"/><line x1="442.2" y1="136.24" x2="448.2" y2="136.24" class="chartlet-error"/><circle cx="445.2" cy="181.68" r="4" class="chartlet-point"><title>Apr: 3.7 (3.2 to 4.1)</title></circle><text x="445.2" y="126.24" text-anchor="middle" class="chartlet-value">3.7</text><text x="445.2" y="342" text-anchor="middle" class="chartlet-label">Apr</text><line x1="567.6" y1="181.68" x2="567.6" y2="113.52" class="chartlet-error"/><line x1="564.6" y1="181.68" x2="570.6" y2="181.68" class="chartlet-error"/><line x1="564.6" y1="113.52" x2="570.6" y2="113.52" class="chartlet-error"/><circle cx="567.6" cy="147.6" r="4" class="chartlet-point"><title>May: 4 (3.7 to 4.3)</title></circle><text x="567.6" y="103.52" text-anchor="middle" class="chartlet-value">4</text><text x="567.6" y="342" text-anchor="middle" class="chartlet-label">May</text><line x1="690" y1="170.32" x2="690" y2="79.44" class="chartlet-error"/><line x1="687" y1="170.32" x2="693" y2="170.32" class="chartlet-error"/><line x1="687" y1="79.44" x2="693" y2="79.44" class="chartlet-error"/><circle cx="690" cy="124.88" r="4" class="chartlet-point"><title>Jun: 4.2 (3.8 to 4.6)</title></circle><text x="690" y="69.44" text-anchor="middle" class="chartlet-value">4.2</text><text x="690" y="342" text-anchor="middle" class="chartlet-label">Jun</text><polyline points="78,249.84 200.4,215.76 322.8,158.96 445.2,181.68 567.6,147.6 690,124.88" class="chartlet-line"/></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="400" height="380" viewBox="0 0 400 380" id="chartlet-36a5fad95253f52a-m" role="img" aria-labelledby="chartlet-36a5fad95253f52a-m-title chartlet-36a5fad95253f52a-m-description" class="chartlet-root"><title id="chartlet-36a5fad95253f52a-m-title">Mean satisfaction by month, with 95 % confidence interval</title><desc id="chartlet-36a5fad95253f52a-m-description">Line chart with 6 categories. Highest: 4.2 (Jun). Lowest: 3.1 (Jan). Error bars show the interval from lower to upper; the table gives it for every point.</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-36a5fad95253f52a-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-36a5fad95253f52a-m .chartlet-label,#chartlet-36a5fad95253f52a-m .chartlet-tick,#chartlet-36a5fad95253f52a-m .chartlet-value,#chartlet-36a5fad95253f52a-m .chartlet-value-inverse,#chartlet-36a5fad95253f52a-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-36a5fad95253f52a-m .chartlet-value,#chartlet-36a5fad95253f52a-m .chartlet-value-inverse{font-weight:600}#chartlet-36a5fad95253f52a-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-36a5fad95253f52a-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-36a5fad95253f52a-m .chartlet-axis-title{font-weight:600}#chartlet-36a5fad95253f52a-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-36a5fad95253f52a-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-36a5fad95253f52a-m .chartlet-bar,#chartlet-36a5fad95253f52a-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-36a5fad95253f52a-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-36a5fad95253f52a-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-36a5fad95253f52a-m .chartlet-error{stroke:var(--chartlet-text);stroke-width:1.5;stroke-linecap:round}#chartlet-36a5fad95253f52a-m .chartlet-title-small{font-size:18px}</style><line x1="72" y1="318" x2="376" y2="318" class="chartlet-grid"/><text x="62" y="322" text-anchor="end" class="chartlet-tick">2.5</text><line x1="72" y1="261.2" x2="376" y2="261.2" class="chartlet-grid"/><text x="62" y="265.2" text-anchor="end" class="chartlet-tick">3.0</text><line x1="72" y1="204.4" x2="376" y2="204.4" class="chartlet-grid"/><text x="62" y="208.4" text-anchor="end" class="chartlet-tick">3.5</text><line x1="72" y1="147.6" x2="376" y2="147.6" class="chartlet-grid"/><text x="62" y="151.6" text-anchor="end" class="chartlet-tick">4.0</text><line x1="72" y1="90.8" x2="376" y2="90.8" class="chartlet-grid"/><text x="62" y="94.8" text-anchor="end" class="chartlet-tick">4.5</text><line x1="72" y1="34" x2="376" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">5.0</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Score from 1 to 5</text><line x1="78" y1="295.28" x2="78" y2="204.4" class="chartlet-error"/><line x1="75" y1="295.28" x2="81" y2="295.28" class="chartlet-error"/><line x1="75" y1="204.4" x2="81" y2="204.4" class="chartlet-error"/><circle cx="78" cy="249.84" r="4" class="chartlet-point"><title>Jan: 3.1 (2.7 to 3.5)</title></circle><text x="78" y="194.4" text-anchor="middle" class="chartlet-value">3.1</text><text x="78" y="342" text-anchor="middle" class="chartlet-label">Jan</text><line x1="136.4" y1="261.2" x2="136.4" y2="158.96" class="chartlet-error"/><line x1="133.4" y1="261.2" x2="139.4" y2="261.2" class="chartlet-error"/><line x1="133.4" y1="158.96" x2="139.4" y2="158.96" class="chartlet-error"/><circle cx="136.4" cy="215.76" r="4" class="chartlet-point"><title>Feb: 3.4 (3 to 3.9)</title></circle><text x="136.4" y="148.96" text-anchor="middle" class="chartlet-value">3.4</text><text x="136.4" y="342" text-anchor="middle" class="chartlet-label">Feb</text><line x1="194.8" y1="204.4" x2="194.8" y2="124.88" class="chartlet-error"/><line x1="191.8" y1="204.4" x2="197.8" y2="204.4" class="chartlet-error"/><line x1="191.8" y1="124.88" x2="197.8" y2="124.88" class="chartlet-error"/><circle cx="194.8" cy="158.96" r="4" class="chartlet-point"><title>Mar: 3.9 (3.5 to 4.2)</title></circle><text x="194.8" y="114.88" text-anchor="middle" class="chartlet-value">3.9</text><text x="194.8" y="342" text-anchor="middle" class="chartlet-label">Mar</text><line x1="253.2" y1="238.48" x2="253.2" y2="136.24" class="chartlet-error"/><line x1="250.2" y1="238.48" x2="256.2" y2="238.48" class="chartlet-error"/><line x1="250.2" y1="136.24" x2="256.2" y2="136.24" class="chartlet-error"/><circle cx="253.2" cy="181.68" r="4" class="chartlet-point"><title>Apr: 3.7 (3.2 to 4.1)</title></circle><text x="253.2" y="126.24" text-anchor="middle" class="chartlet-value">3.7</text><text x="253.2" y="342" text-anchor="middle" class="chartlet-label">Apr</text><line x1="311.6" y1="181.68" x2="311.6" y2="113.52" class="chartlet-error"/><line x1="308.6" y1="181.68" x2="314.6" y2="181.68" class="chartlet-error"/><line x1="308.6" y1="113.52" x2="314.6" y2="113.52" class="chartlet-error"/><circle cx="311.6" cy="147.6" r="4" class="chartlet-point"><title>May: 4 (3.7 to 4.3)</title></circle><text x="311.6" y="103.52" text-anchor="middle" class="chartlet-value">4</text><text x="311.6" y="342" text-anchor="middle" class="chartlet-label">May</text><line x1="370" y1="170.32" x2="370" y2="79.44" class="chartlet-error"/><line x1="367" y1="170.32" x2="373" y2="170.32" class="chartlet-error"/><line x1="367" y1="79.44" x2="373" y2="79.44" class="chartlet-error"/><circle cx="370" cy="124.88" r="4" class="chartlet-point"><title>Jun: 4.2 (3.8 to 4.6)</title></circle><text x="370" y="69.44" text-anchor="middle" class="chartlet-value">4.2</text><text x="370" y="342" text-anchor="middle" class="chartlet-label">Jun</text><polyline points="78,249.84 136.4,215.76 194.8,158.96 253.2,181.68 311.6,147.6 370,124.88" class="chartlet-line"/></svg></div><p class="chartlet-source">Source: Illustrative survey</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Mean satisfaction by month, 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">Jan</th><td>3.1</td><td>2.7 to 3.5</td></tr><tr><th scope="row">Feb</th><td>3.4</td><td>3 to 3.9</td></tr><tr><th scope="row">Mar</th><td>3.9</td><td>3.5 to 4.2</td></tr><tr><th scope="row">Apr</th><td>3.7</td><td>3.2 to 4.1</td></tr><tr><th scope="row">May</th><td>4</td><td>3.7 to 4.3</td></tr><tr><th scope="row">Jun</th><td>4.2</td><td>3.8 to 4.6</td></tr></tbody></table></details></figure></div>