chartlet 0.3.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Checkout API error rate</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-ed24ebc8aeefb075" role="img" aria-labelledby="chartlet-ed24ebc8aeefb075-title chartlet-ed24ebc8aeefb075-description" class="chartlet-root"><title id="chartlet-ed24ebc8aeefb075-title">Checkout API error rate</title><desc id="chartlet-ed24ebc8aeefb075-description">Time chart with 42 points from 2026-02-02 to 2026-03-15. Highest: 2.14 (2026-02-24). Lowest: 0.23 (2026-02-06, 2026-02-15). 1 value is missing. Zones: Above the error budget, values 1.00 to 2.50; Maintenance, 2026-02-16 to 2026-02-19. Markers: Release 2.4 at 2026-02-24, 2.14; Rollback at 2026-02-26, 1.18; Hotfix at 2026-03-06, 0.36.</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-ed24ebc8aeefb075 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-ed24ebc8aeefb075 .chartlet-label,#chartlet-ed24ebc8aeefb075 .chartlet-tick,#chartlet-ed24ebc8aeefb075 .chartlet-value,#chartlet-ed24ebc8aeefb075 .chartlet-value-inverse,#chartlet-ed24ebc8aeefb075 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-ed24ebc8aeefb075 .chartlet-value,#chartlet-ed24ebc8aeefb075 .chartlet-value-inverse{font-weight:600}#chartlet-ed24ebc8aeefb075 .chartlet-value{fill:var(--chartlet-text)}#chartlet-ed24ebc8aeefb075 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-ed24ebc8aeefb075 .chartlet-axis-title{font-weight:600}#chartlet-ed24ebc8aeefb075 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-ed24ebc8aeefb075 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-ed24ebc8aeefb075 .chartlet-bar,#chartlet-ed24ebc8aeefb075 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-ed24ebc8aeefb075 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-ed24ebc8aeefb075 .chartlet-background{fill:var(--chartlet-background)}#chartlet-ed24ebc8aeefb075 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-ed24ebc8aeefb075 .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-ed24ebc8aeefb075 .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-ed24ebc8aeefb075 .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-ed24ebc8aeefb075 .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-ed24ebc8aeefb075 .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-ed24ebc8aeefb075 .chartlet-hit{fill:transparent;stroke:none}#chartlet-ed24ebc8aeefb075 .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-ed24ebc8aeefb075 .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-ed24ebc8aeefb075 .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-ed24ebc8aeefb075 .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-ed24ebc8aeefb075 .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-ed24ebc8aeefb075 .chartlet-hatch{stroke:none}#chartlet-ed24ebc8aeefb075 .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-ed24ebc8aeefb075 .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-ed24ebc8aeefb075 .chartlet-line-thin{stroke-width:1}#chartlet-ed24ebc8aeefb075 .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-ed24ebc8aeefb075 .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-ed24ebc8aeefb075 .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-ed24ebc8aeefb075 .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-ed24ebc8aeefb075 .chartlet-rule-label{font-size:12px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-ed24ebc8aeefb075 .chartlet-zone{fill:var(--chartlet-zero);fill-opacity:.14;stroke:none}#chartlet-ed24ebc8aeefb075 .chartlet-marker{fill:var(--chartlet-text);stroke:var(--chartlet-background);stroke-width:1.5;stroke-linejoin:round}</style><line x1="72" y1="394" x2="776" y2="394" class="chartlet-zero"/><text x="62" y="398" text-anchor="end" class="chartlet-tick">0.0</text><line x1="72" y1="334" x2="776" y2="334" class="chartlet-grid"/><text x="62" y="338" text-anchor="end" class="chartlet-tick">0.5</text><line x1="72" y1="274" x2="776" y2="274" class="chartlet-grid"/><text x="62" y="278" text-anchor="end" class="chartlet-tick">1.0</text><line x1="72" y1="214" x2="776" y2="214" class="chartlet-grid"/><text x="62" y="218" text-anchor="end" class="chartlet-tick">1.5</text><line x1="72" y1="154" x2="776" y2="154" class="chartlet-grid"/><text x="62" y="158" text-anchor="end" class="chartlet-tick">2.0</text><line x1="72" y1="94" x2="776" y2="94" class="chartlet-grid"/><text x="62" y="98" text-anchor="end" class="chartlet-tick">2.5</text><line x1="72" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">3.0</text><line x1="78" y1="34" x2="78" y2="394" class="chartlet-grid"/><text x="78" y="418" text-anchor="middle" class="chartlet-tick">2026-02-02</text><line x1="196.146" y1="34" x2="196.146" y2="394" class="chartlet-grid"/><text x="196.146" y="418" text-anchor="middle" class="chartlet-tick">2026-02-09</text><line x1="314.293" y1="34" x2="314.293" y2="394" class="chartlet-grid"/><text x="314.293" y="418" text-anchor="middle" class="chartlet-tick">2026-02-16</text><line x1="432.439" y1="34" x2="432.439" y2="394" class="chartlet-grid"/><text x="432.439" y="418" text-anchor="middle" class="chartlet-tick">2026-02-23</text><line x1="550.585" y1="34" x2="550.585" y2="394" class="chartlet-grid"/><text x="550.585" y="418" text-anchor="middle" class="chartlet-tick">2026-03-02</text><line x1="668.732" y1="34" x2="668.732" y2="394" class="chartlet-grid"/><text x="668.732" y="418" text-anchor="middle" class="chartlet-tick">2026-03-09</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Errors per 100 requests</text><rect x="72" y="94" width="704" height="180" class="chartlet-zone"><title>Above the error budget: values 1.00 to 2.50</title></rect><rect x="314.293" y="34" width="50.634" height="360" class="chartlet-zone"><title>Maintenance: 2026-02-16 to 2026-02-19</title></rect><polyline points="78,350.8 94.878,344.8 111.756,350.8 128.634,362.8 145.512,366.4 162.39,358 179.268,350.8 196.146,352 213.024,358 229.902,356.8 246.78,348.4 263.659,347.2 280.537,356.8 297.415,366.4 314.293,364" class="chartlet-line chartlet-line-series-1"/><polyline points="348.049,348.4 364.927,353.2 381.805,358 398.683,355.6 415.561,349.6 432.439,352 449.317,137.2 466.195,199.6 483.073,252.4 499.951,320.8 516.829,314.8 533.707,313.6 550.585,318.4 567.463,323.2 584.341,325.6 601.22,322 618.098,365.2 634.976,364 651.854,353.2 668.732,344.8 685.61,348.4 702.488,358 719.366,360.4 736.244,355.6 753.122,353.2 770,359.2" class="chartlet-line chartlet-line-series-1"/><circle cx="78" cy="350.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-02 – Error rate: 0.36</title></circle><circle cx="94.878" cy="344.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-03 – Error rate: 0.41</title></circle><circle cx="111.756" cy="350.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-04 – Error rate: 0.36</title></circle><circle cx="128.634" cy="362.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-05 – Error rate: 0.26</title></circle><circle cx="145.512" cy="366.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-06 – Error rate: 0.23</title></circle><circle cx="162.39" cy="358" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-07 – Error rate: 0.30</title></circle><circle cx="179.268" cy="350.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-08 – Error rate: 0.36</title></circle><circle cx="196.146" cy="352" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-09 – Error rate: 0.35</title></circle><circle cx="213.024" cy="358" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-10 – Error rate: 0.30</title></circle><circle cx="229.902" cy="356.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-11 – Error rate: 0.31</title></circle><circle cx="246.78" cy="348.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-12 – Error rate: 0.38</title></circle><circle cx="263.659" cy="347.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-13 – Error rate: 0.39</title></circle><circle cx="280.537" cy="356.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-14 – Error rate: 0.31</title></circle><circle cx="297.415" cy="366.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-15 – Error rate: 0.23</title></circle><circle cx="314.293" cy="364" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-16 – Error rate: 0.25</title></circle><circle cx="348.049" cy="348.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-18 – Error rate: 0.38</title></circle><circle cx="364.927" cy="353.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-19 – Error rate: 0.34</title></circle><circle cx="381.805" cy="358" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-20 – Error rate: 0.30</title></circle><circle cx="398.683" cy="355.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-21 – Error rate: 0.32</title></circle><circle cx="415.561" cy="349.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-22 – Error rate: 0.37</title></circle><circle cx="432.439" cy="352" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-23 – Error rate: 0.35</title></circle><circle cx="449.317" cy="137.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-24 – Error rate: 2.14</title></circle><circle cx="466.195" cy="199.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-25 – Error rate: 1.62</title></circle><circle cx="483.073" cy="252.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-26 – Error rate: 1.18</title></circle><circle cx="499.951" cy="320.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-27 – Error rate: 0.61</title></circle><circle cx="516.829" cy="314.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-28 – Error rate: 0.66</title></circle><circle cx="533.707" cy="313.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-01 – Error rate: 0.67</title></circle><circle cx="550.585" cy="318.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-02 – Error rate: 0.63</title></circle><circle cx="567.463" cy="323.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-03 – Error rate: 0.59</title></circle><circle cx="584.341" cy="325.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-04 – Error rate: 0.57</title></circle><circle cx="601.22" cy="322" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-05 – Error rate: 0.60</title></circle><circle cx="618.098" cy="365.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-06 – Error rate: 0.24</title></circle><circle cx="634.976" cy="364" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-07 – Error rate: 0.25</title></circle><circle cx="651.854" cy="353.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-08 – Error rate: 0.34</title></circle><circle cx="668.732" cy="344.8" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-09 – Error rate: 0.41</title></circle><circle cx="685.61" cy="348.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-10 – Error rate: 0.38</title></circle><circle cx="702.488" cy="358" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-11 – Error rate: 0.30</title></circle><circle cx="719.366" cy="360.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-12 – Error rate: 0.28</title></circle><circle cx="736.244" cy="355.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-13 – Error rate: 0.32</title></circle><circle cx="753.122" cy="353.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-14 – Error rate: 0.34</title></circle><circle cx="770" cy="359.2" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-03-15 – Error rate: 0.29</title></circle><polyline points="449.317,129.7 456.217,142 442.417,142 449.317,129.7" class="chartlet-marker"><title>Release 2.4: 2026-02-24, 2.14</title></polyline><polyline points="483.073,259.9 489.973,247.6 476.173,247.6 483.073,259.9" class="chartlet-marker"><title>Rollback: 2026-02-26, 1.18</title></polyline><polyline points="618.098,343.3 625.598,350.8 618.098,358.3 610.598,350.8 618.098,343.3" class="chartlet-marker"><title>Hotfix: 2026-03-06, 0.36</title></polyline><text x="76" y="108" text-anchor="start" class="chartlet-rule-label">Above the error budget</text><text x="318.293" y="48" text-anchor="start" class="chartlet-rule-label">Maintenance</text><text x="460.817" y="141.2" text-anchor="start" class="chartlet-rule-label">Release 2.4</text><text x="494.573" y="256.4" text-anchor="start" class="chartlet-rule-label">Rollback</text><text x="606.598" y="354.8" text-anchor="end" class="chartlet-rule-label">Hotfix</text><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Day</text></svg><p class="chartlet-source">Source: Illustrative values, chartlet</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Checkout API error rate</caption><thead><tr><th scope="col">Time</th><th scope="col">Error rate</th></tr></thead><tbody><tr><th scope="row">2026-02-02</th><td>0.36</td></tr><tr><th scope="row">2026-02-03</th><td>0.41</td></tr><tr><th scope="row">2026-02-04</th><td>0.36</td></tr><tr><th scope="row">2026-02-05</th><td>0.26</td></tr><tr><th scope="row">2026-02-06</th><td>0.23</td></tr><tr><th scope="row">2026-02-07</th><td>0.30</td></tr><tr><th scope="row">2026-02-08</th><td>0.36</td></tr><tr><th scope="row">2026-02-09</th><td>0.35</td></tr><tr><th scope="row">2026-02-10</th><td>0.30</td></tr><tr><th scope="row">2026-02-11</th><td>0.31</td></tr><tr><th scope="row">2026-02-12</th><td>0.38</td></tr><tr><th scope="row">2026-02-13</th><td>0.39</td></tr><tr><th scope="row">2026-02-14</th><td>0.31</td></tr><tr><th scope="row">2026-02-15</th><td>0.23</td></tr><tr><th scope="row">2026-02-16</th><td>0.25</td></tr><tr><th scope="row">2026-02-17</th><td>Missing</td></tr><tr><th scope="row">2026-02-18</th><td>0.38</td></tr><tr><th scope="row">2026-02-19</th><td>0.34</td></tr><tr><th scope="row">2026-02-20</th><td>0.30</td></tr><tr><th scope="row">2026-02-21</th><td>0.32</td></tr><tr><th scope="row">2026-02-22</th><td>0.37</td></tr><tr><th scope="row">2026-02-23</th><td>0.35</td></tr><tr><th scope="row">2026-02-24</th><td>2.14</td></tr><tr><th scope="row">2026-02-25</th><td>1.62</td></tr><tr><th scope="row">2026-02-26</th><td>1.18</td></tr><tr><th scope="row">2026-02-27</th><td>0.61</td></tr><tr><th scope="row">2026-02-28</th><td>0.66</td></tr><tr><th scope="row">2026-03-01</th><td>0.67</td></tr><tr><th scope="row">2026-03-02</th><td>0.63</td></tr><tr><th scope="row">2026-03-03</th><td>0.59</td></tr><tr><th scope="row">2026-03-04</th><td>0.57</td></tr><tr><th scope="row">2026-03-05</th><td>0.60</td></tr><tr><th scope="row">2026-03-06</th><td>0.24</td></tr><tr><th scope="row">2026-03-07</th><td>0.25</td></tr><tr><th scope="row">2026-03-08</th><td>0.34</td></tr><tr><th scope="row">2026-03-09</th><td>0.41</td></tr><tr><th scope="row">2026-03-10</th><td>0.38</td></tr><tr><th scope="row">2026-03-11</th><td>0.30</td></tr><tr><th scope="row">2026-03-12</th><td>0.28</td></tr><tr><th scope="row">2026-03-13</th><td>0.32</td></tr><tr><th scope="row">2026-03-14</th><td>0.34</td></tr><tr><th scope="row">2026-03-15</th><td>0.29</td></tr></tbody></table></details></figure>