chartlet 0.19.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Accessibility checks by page</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-8193b9e0f528582a" role="img" aria-labelledby="chartlet-8193b9e0f528582a-title chartlet-8193b9e0f528582a-description" class="chartlet-root"><title id="chartlet-8193b9e0f528582a-title">Accessibility checks by page</title><desc id="chartlet-8193b9e0f528582a-description">Bar chart with 5 categories and 4 series (Failed, Needs review, Passed, Not tested). Highest: 44 (Passed in Help). Lowest: 1 (Failed in Help, Not tested in Help). Each bar shows the shares of the series in its category&#39;s total.</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-8193b9e0f528582a .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-8193b9e0f528582a .chartlet-label,#chartlet-8193b9e0f528582a .chartlet-tick,#chartlet-8193b9e0f528582a .chartlet-value,#chartlet-8193b9e0f528582a .chartlet-value-inverse,#chartlet-8193b9e0f528582a .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-8193b9e0f528582a .chartlet-value,#chartlet-8193b9e0f528582a .chartlet-value-inverse{font-weight:600}#chartlet-8193b9e0f528582a .chartlet-value{fill:var(--chartlet-text)}#chartlet-8193b9e0f528582a .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-8193b9e0f528582a .chartlet-axis-title{font-weight:600}#chartlet-8193b9e0f528582a .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-8193b9e0f528582a .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-8193b9e0f528582a .chartlet-bar,#chartlet-8193b9e0f528582a .chartlet-point{fill:var(--chartlet-accent)}#chartlet-8193b9e0f528582a .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-8193b9e0f528582a .chartlet-background{fill:var(--chartlet-background)}#chartlet-8193b9e0f528582a .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-8193b9e0f528582a .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-8193b9e0f528582a .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-8193b9e0f528582a .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-8193b9e0f528582a .chartlet-series-4{fill:var(--chartlet-color-4)}.chartlet-wrapper{display:inline-block;max-width:100%}.chartlet-filter{border:none;padding:0;margin:0 0 12px 0}.chartlet-filter legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-filter label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-filter input{margin-right:4px}.chartlet-filter input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-filter input.series-0:not(:checked)) .chartlet-root [data-series="0"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-1:not(:checked)) .chartlet-root [data-series="1"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-2:not(:checked)) .chartlet-root [data-series="2"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-3:not(:checked)) .chartlet-root [data-series="3"]{display:none}</style><line x1="88" y1="58" x2="88" y2="414" class="chartlet-zero"/><text x="88" y="436" text-anchor="middle" class="chartlet-tick">0%</text><line x1="216.8" y1="58" x2="216.8" y2="414" class="chartlet-grid"/><text x="216.8" y="436" text-anchor="middle" class="chartlet-tick">20%</text><line x1="345.6" y1="58" x2="345.6" y2="414" class="chartlet-grid"/><text x="345.6" y="436" text-anchor="middle" class="chartlet-tick">40%</text><line x1="474.4" y1="58" x2="474.4" y2="414" class="chartlet-grid"/><text x="474.4" y="436" text-anchor="middle" class="chartlet-tick">60%</text><line x1="603.2" y1="58" x2="603.2" y2="414" class="chartlet-grid"/><text x="603.2" y="436" text-anchor="middle" class="chartlet-tick">80%</text><line x1="732" y1="58" x2="732" y2="414" class="chartlet-grid"/><text x="732" y="436" text-anchor="middle" class="chartlet-tick">100%</text><rect x="88" y="2" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="104" y="11" text-anchor="start" class="chartlet-legend">Failed</text><rect x="159.4" y="2" width="10" height="10" class="chartlet-bar chartlet-series-2"/><text x="175.4" y="11" text-anchor="start" class="chartlet-legend">Needs review</text><rect x="275.44" y="2" width="10" height="10" class="chartlet-bar chartlet-series-3"/><text x="291.44" y="11" text-anchor="start" class="chartlet-legend">Passed</text><rect x="353.08" y="2" width="10" height="10" class="chartlet-bar chartlet-series-4"/><text x="369.08" y="11" text-anchor="start" class="chartlet-legend">Not tested</text><rect x="88" y="70.816" width="51.52" height="45.568" class="chartlet-bar chartlet-series-1"><title>Home – Failed: 4 (8%)</title></rect><text x="113.76" y="97.6" text-anchor="middle" class="chartlet-value-inverse">8%</text><rect x="139.52" y="70.816" width="77.28" height="45.568" class="chartlet-bar chartlet-series-2"><title>Home – Needs review: 6 (12%)</title></rect><text x="178.16" y="97.6" text-anchor="middle" class="chartlet-value-inverse">12%</text><rect x="216.8" y="70.816" width="489.44" height="45.568" class="chartlet-bar chartlet-series-3"><title>Home – Passed: 38 (76%)</title></rect><text x="461.52" y="97.6" text-anchor="middle" class="chartlet-value-inverse">76%</text><rect x="706.24" y="70.816" width="25.76" height="45.568" class="chartlet-bar chartlet-series-4"><title>Home – Not tested: 2 (4%)</title></rect><text x="76" y="97.6" text-anchor="end" class="chartlet-label">Home</text><rect x="88" y="142.016" width="115.92" height="45.568" class="chartlet-bar chartlet-series-1"><title>Search – Failed: 9 (18%)</title></rect><text x="145.96" y="168.8" text-anchor="middle" class="chartlet-value-inverse">18%</text><rect x="203.92" y="142.016" width="90.16" height="45.568" class="chartlet-bar chartlet-series-2"><title>Search – Needs review: 7 (14%)</title></rect><text x="249" y="168.8" text-anchor="middle" class="chartlet-value-inverse">14%</text><rect x="294.08" y="142.016" width="386.4" height="45.568" class="chartlet-bar chartlet-series-3"><title>Search – Passed: 30 (60%)</title></rect><text x="487.28" y="168.8" text-anchor="middle" class="chartlet-value-inverse">60%</text><rect x="680.48" y="142.016" width="51.52" height="45.568" class="chartlet-bar chartlet-series-4"><title>Search – Not tested: 4 (8%)</title></rect><text x="706.24" y="168.8" text-anchor="middle" class="chartlet-value-inverse">8%</text><text x="76" y="168.8" text-anchor="end" class="chartlet-label">Search</text><rect x="88" y="213.216" width="154.56" height="45.568" class="chartlet-bar chartlet-series-1"><title>Checkout – Failed: 12 (24%)</title></rect><text x="165.28" y="240" text-anchor="middle" class="chartlet-value-inverse">24%</text><rect x="242.56" y="213.216" width="128.8" height="45.568" class="chartlet-bar chartlet-series-2"><title>Checkout – Needs review: 10 (20%)</title></rect><text x="306.96" y="240" text-anchor="middle" class="chartlet-value-inverse">20%</text><rect x="371.36" y="213.216" width="322" height="45.568" class="chartlet-bar chartlet-series-3"><title>Checkout – Passed: 25 (50%)</title></rect><text x="532.36" y="240" text-anchor="middle" class="chartlet-value-inverse">50%</text><rect x="693.36" y="213.216" width="38.64" height="45.568" class="chartlet-bar chartlet-series-4"><title>Checkout – Not tested: 3 (6%)</title></rect><text x="712.68" y="240" text-anchor="middle" class="chartlet-value-inverse">6%</text><text x="76" y="240" text-anchor="end" class="chartlet-label">Checkout</text><rect x="88" y="284.416" width="38.64" height="45.568" class="chartlet-bar chartlet-series-1"><title>Account – Failed: 3 (6%)</title></rect><text x="107.32" y="311.2" text-anchor="middle" class="chartlet-value-inverse">6%</text><rect x="126.64" y="284.416" width="64.4" height="45.568" class="chartlet-bar chartlet-series-2"><title>Account – Needs review: 5 (10%)</title></rect><text x="158.84" y="311.2" text-anchor="middle" class="chartlet-value-inverse">10%</text><rect x="191.04" y="284.416" width="515.2" height="45.568" class="chartlet-bar chartlet-series-3"><title>Account – Passed: 40 (80%)</title></rect><text x="448.64" y="311.2" text-anchor="middle" class="chartlet-value-inverse">80%</text><rect x="706.24" y="284.416" width="25.76" height="45.568" class="chartlet-bar chartlet-series-4"><title>Account – Not tested: 2 (4%)</title></rect><text x="76" y="311.2" text-anchor="end" class="chartlet-label">Account</text><rect x="88" y="355.616" width="12.88" height="45.568" class="chartlet-bar chartlet-series-1"><title>Help – Failed: 1 (2%)</title></rect><rect x="100.88" y="355.616" width="51.52" height="45.568" class="chartlet-bar chartlet-series-2"><title>Help – Needs review: 4 (8%)</title></rect><text x="126.64" y="382.4" text-anchor="middle" class="chartlet-value-inverse">8%</text><rect x="152.4" y="355.616" width="566.72" height="45.568" class="chartlet-bar chartlet-series-3"><title>Help – Passed: 44 (88%)</title></rect><text x="435.76" y="382.4" text-anchor="middle" class="chartlet-value-inverse">88%</text><rect x="719.12" y="355.616" width="12.88" height="45.568" class="chartlet-bar chartlet-series-4"><title>Help – Not tested: 1 (2%)</title></rect><text x="76" y="382.4" text-anchor="end" class="chartlet-label">Help</text></svg><p class="chartlet-source">Source: Sample data</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Accessibility checks by page</caption><thead><tr><th scope="col">Category</th><th scope="col">Failed</th><th scope="col">Needs review</th><th scope="col">Passed</th><th scope="col">Not tested</th></tr></thead><tbody><tr><th scope="row">Home</th><td>4</td><td>6</td><td>38</td><td>2</td></tr><tr><th scope="row">Search</th><td>9</td><td>7</td><td>30</td><td>4</td></tr><tr><th scope="row">Checkout</th><td>12</td><td>10</td><td>25</td><td>3</td></tr><tr><th scope="row">Account</th><td>3</td><td>5</td><td>40</td><td>2</td></tr><tr><th scope="row">Help</th><td>1</td><td>4</td><td>44</td><td>1</td></tr></tbody></table></details></figure>