chartlet 0.23.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>Two storage engines compared</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="680" height="480" viewBox="0 0 680 480" id="chartlet-fb518987f17b406e" role="img" aria-labelledby="chartlet-fb518987f17b406e-title chartlet-fb518987f17b406e-description" class="chartlet-root"><title id="chartlet-fb518987f17b406e-title">Two storage engines compared</title><desc id="chartlet-fb518987f17b406e-description">Radar chart of 6 axes (Read, Write, Durability, Memory, Tooling, Ease of use) with 2 series. Engine A: strongest on Read (92), weakest on Memory (40). Engine B: strongest on Durability (90), weakest on Ease of use (48).</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-fb518987f17b406e .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-fb518987f17b406e .chartlet-label,#chartlet-fb518987f17b406e .chartlet-tick,#chartlet-fb518987f17b406e .chartlet-value,#chartlet-fb518987f17b406e .chartlet-value-inverse,#chartlet-fb518987f17b406e .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-fb518987f17b406e .chartlet-value,#chartlet-fb518987f17b406e .chartlet-value-inverse{font-weight:600}#chartlet-fb518987f17b406e .chartlet-value{fill:var(--chartlet-text)}#chartlet-fb518987f17b406e .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-fb518987f17b406e .chartlet-axis-title{font-weight:600}#chartlet-fb518987f17b406e .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-fb518987f17b406e .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-fb518987f17b406e .chartlet-bar,#chartlet-fb518987f17b406e .chartlet-point{fill:var(--chartlet-accent)}#chartlet-fb518987f17b406e .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-fb518987f17b406e .chartlet-background{fill:var(--chartlet-background)}#chartlet-fb518987f17b406e .chartlet-radar-ring{fill:none;stroke:var(--chartlet-grid);stroke-width:1}#chartlet-fb518987f17b406e .chartlet-radar-spoke{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-fb518987f17b406e .chartlet-radar-area{fill-opacity:.14;stroke-width:2;stroke-linejoin:round}#chartlet-fb518987f17b406e .chartlet-radar-key{stroke-width:2}#chartlet-fb518987f17b406e .chartlet-radar-a1{fill:var(--chartlet-color-1);stroke:var(--chartlet-color-1)}#chartlet-fb518987f17b406e .chartlet-radar-a2{fill:var(--chartlet-color-2);stroke:var(--chartlet-color-2);stroke-dasharray:7 4}#chartlet-fb518987f17b406e .chartlet-radar-a3{fill:var(--chartlet-color-3);stroke:var(--chartlet-color-3);stroke-dasharray:2 3}#chartlet-fb518987f17b406e .chartlet-radar-a4{fill:var(--chartlet-color-4);stroke:var(--chartlet-color-4);stroke-dasharray:8 3 2 3}#chartlet-fb518987f17b406e .chartlet-radar-dot{stroke:var(--chartlet-background);stroke-width:1.5}#chartlet-fb518987f17b406e .chartlet-radar-d1{fill:var(--chartlet-color-1)}#chartlet-fb518987f17b406e .chartlet-radar-d2{fill:var(--chartlet-color-2)}#chartlet-fb518987f17b406e .chartlet-radar-d3{fill:var(--chartlet-color-3)}#chartlet-fb518987f17b406e .chartlet-radar-d4{fill:var(--chartlet-color-4)}#chartlet-fb518987f17b406e .chartlet-radar-tick{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-fb518987f17b406e .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}</style><line x1="24" y1="7" x2="48" y2="7" class="chartlet-radar-key chartlet-radar-a1"/><text x="56" y="11" text-anchor="start" class="chartlet-legend">Engine A</text><line x1="126.4" y1="7" x2="150.4" y2="7" class="chartlet-radar-key chartlet-radar-a2"/><text x="158.4" y="11" text-anchor="start" class="chartlet-legend">Engine B</text><polyline points="340,198 383.301,223 383.301,273 340,298 296.699,273 296.699,223 340,198" class="chartlet-radar-ring"/><polyline points="340,148 426.603,198 426.603,298 340,348 253.397,298 253.397,198 340,148" class="chartlet-radar-ring"/><polyline points="340,98 469.904,173 469.904,323 340,398 210.096,323 210.096,173 340,98" class="chartlet-radar-ring"/><polyline points="340,48 513.205,148 513.205,348 340,448 166.795,348 166.795,148 340,48" class="chartlet-radar-ring"/><line x1="340" y1="248" x2="340" y2="48" class="chartlet-radar-spoke"/><line x1="340" y1="248" x2="513.205" y2="148" class="chartlet-radar-spoke"/><line x1="340" y1="248" x2="513.205" y2="348" class="chartlet-radar-spoke"/><line x1="340" y1="248" x2="340" y2="448" class="chartlet-radar-spoke"/><line x1="340" y1="248" x2="166.795" y2="348" class="chartlet-radar-spoke"/><line x1="340" y1="248" x2="166.795" y2="148" class="chartlet-radar-spoke"/><text x="344" y="195" text-anchor="start" class="chartlet-radar-tick">25</text><text x="344" y="145" text-anchor="start" class="chartlet-radar-tick">50</text><text x="344" y="95" text-anchor="start" class="chartlet-radar-tick">75</text><text x="344" y="45" text-anchor="start" class="chartlet-radar-tick">100</text><text x="340" y="30" text-anchor="middle" class="chartlet-label">Read</text><text x="521.865" y="141" text-anchor="start" class="chartlet-label">Write</text><text x="521.865" y="363" text-anchor="start" class="chartlet-label">Durability</text><text x="340" y="468" text-anchor="middle" class="chartlet-label">Memory</text><text x="158.135" y="363" text-anchor="end" class="chartlet-label">Tooling</text><text x="158.135" y="141" text-anchor="end" class="chartlet-label">Ease of use</text><polyline data-series="0" points="340,64 440.459,190 468.172,322 340,328 192.776,333 225.685,182 340,64" class="chartlet-radar-area chartlet-radar-a1"><title>Engine A</title></polyline><circle data-series="0" cx="340" cy="64" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Read: 92</title></circle><circle data-series="0" cx="440.459" cy="190" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Write: 58</title></circle><circle data-series="0" cx="468.172" cy="322" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Durability: 74</title></circle><circle data-series="0" cx="340" cy="328" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Memory: 40</title></circle><circle data-series="0" cx="192.776" cy="333" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Tooling: 85</title></circle><circle data-series="0" cx="225.685" cy="182" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Ease of use: 66</title></circle><polyline data-series="1" points="340,120 492.42,160 495.885,338 340,392 244.737,303 256.862,200 340,120" class="chartlet-radar-area chartlet-radar-a2"><title>Engine B</title></polyline><circle data-series="1" cx="340" cy="120" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Read: 64</title></circle><circle data-series="1" cx="492.42" cy="160" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Write: 88</title></circle><circle data-series="1" cx="495.885" cy="338" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Durability: 90</title></circle><circle data-series="1" cx="340" cy="392" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Memory: 72</title></circle><circle data-series="1" cx="244.737" cy="303" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Tooling: 55</title></circle><circle data-series="1" cx="256.862" cy="200" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Ease of use: 48</title></circle></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="460" viewBox="0 0 380 460" id="chartlet-fb518987f17b406e-m" role="img" aria-labelledby="chartlet-fb518987f17b406e-m-title chartlet-fb518987f17b406e-m-description" class="chartlet-root"><title id="chartlet-fb518987f17b406e-m-title">Two storage engines compared</title><desc id="chartlet-fb518987f17b406e-m-description">Radar chart of 6 axes (Read, Write, Durability, Memory, Tooling, Ease of use) with 2 series. Engine A: strongest on Read (92), weakest on Memory (40). Engine B: strongest on Durability (90), weakest on Ease of use (48).</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-fb518987f17b406e-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-fb518987f17b406e-m .chartlet-label,#chartlet-fb518987f17b406e-m .chartlet-tick,#chartlet-fb518987f17b406e-m .chartlet-value,#chartlet-fb518987f17b406e-m .chartlet-value-inverse,#chartlet-fb518987f17b406e-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-fb518987f17b406e-m .chartlet-value,#chartlet-fb518987f17b406e-m .chartlet-value-inverse{font-weight:600}#chartlet-fb518987f17b406e-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-fb518987f17b406e-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-fb518987f17b406e-m .chartlet-axis-title{font-weight:600}#chartlet-fb518987f17b406e-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-fb518987f17b406e-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-fb518987f17b406e-m .chartlet-bar,#chartlet-fb518987f17b406e-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-fb518987f17b406e-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-fb518987f17b406e-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-fb518987f17b406e-m .chartlet-radar-ring{fill:none;stroke:var(--chartlet-grid);stroke-width:1}#chartlet-fb518987f17b406e-m .chartlet-radar-spoke{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-fb518987f17b406e-m .chartlet-radar-area{fill-opacity:.14;stroke-width:2;stroke-linejoin:round}#chartlet-fb518987f17b406e-m .chartlet-radar-key{stroke-width:2}#chartlet-fb518987f17b406e-m .chartlet-radar-a1{fill:var(--chartlet-color-1);stroke:var(--chartlet-color-1)}#chartlet-fb518987f17b406e-m .chartlet-radar-a2{fill:var(--chartlet-color-2);stroke:var(--chartlet-color-2);stroke-dasharray:7 4}#chartlet-fb518987f17b406e-m .chartlet-radar-a3{fill:var(--chartlet-color-3);stroke:var(--chartlet-color-3);stroke-dasharray:2 3}#chartlet-fb518987f17b406e-m .chartlet-radar-a4{fill:var(--chartlet-color-4);stroke:var(--chartlet-color-4);stroke-dasharray:8 3 2 3}#chartlet-fb518987f17b406e-m .chartlet-radar-dot{stroke:var(--chartlet-background);stroke-width:1.5}#chartlet-fb518987f17b406e-m .chartlet-radar-d1{fill:var(--chartlet-color-1)}#chartlet-fb518987f17b406e-m .chartlet-radar-d2{fill:var(--chartlet-color-2)}#chartlet-fb518987f17b406e-m .chartlet-radar-d3{fill:var(--chartlet-color-3)}#chartlet-fb518987f17b406e-m .chartlet-radar-d4{fill:var(--chartlet-color-4)}#chartlet-fb518987f17b406e-m .chartlet-radar-tick{font-size:11px;fill:var(--chartlet-muted);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-fb518987f17b406e-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-fb518987f17b406e-m .chartlet-title-small{font-size:18px}</style><line x1="12" y1="7" x2="36" y2="7" class="chartlet-radar-key chartlet-radar-a1"/><text x="44" y="11" text-anchor="start" class="chartlet-legend">Engine A</text><line x1="114.4" y1="7" x2="138.4" y2="7" class="chartlet-radar-key chartlet-radar-a2"/><text x="146.4" y="11" text-anchor="start" class="chartlet-legend">Engine B</text><polyline points="190,215 209.919,226.5 209.919,249.5 190,261 170.081,249.5 170.081,226.5 190,215" class="chartlet-radar-ring"/><polyline points="190,192 229.837,215 229.837,261 190,284 150.163,261 150.163,215 190,192" class="chartlet-radar-ring"/><polyline points="190,169 249.756,203.5 249.756,272.5 190,307 130.244,272.5 130.244,203.5 190,169" class="chartlet-radar-ring"/><polyline points="190,146 269.674,192 269.674,284 190,330 110.326,284 110.326,192 190,146" class="chartlet-radar-ring"/><line x1="190" y1="238" x2="190" y2="146" class="chartlet-radar-spoke"/><line x1="190" y1="238" x2="269.674" y2="192" class="chartlet-radar-spoke"/><line x1="190" y1="238" x2="269.674" y2="284" class="chartlet-radar-spoke"/><line x1="190" y1="238" x2="190" y2="330" class="chartlet-radar-spoke"/><line x1="190" y1="238" x2="110.326" y2="284" class="chartlet-radar-spoke"/><line x1="190" y1="238" x2="110.326" y2="192" class="chartlet-radar-spoke"/><text x="194" y="212" text-anchor="start" class="chartlet-radar-tick">25</text><text x="194" y="189" text-anchor="start" class="chartlet-radar-tick">50</text><text x="194" y="166" text-anchor="start" class="chartlet-radar-tick">75</text><text x="194" y="143" text-anchor="start" class="chartlet-radar-tick">100</text><text x="190" y="128" text-anchor="middle" class="chartlet-label">Read</text><text x="278.335" y="185" text-anchor="start" class="chartlet-label">Write</text><text x="278.335" y="299" text-anchor="start" class="chartlet-label">Durability</text><text x="190" y="350" text-anchor="middle" class="chartlet-label">Memory</text><text x="101.665" y="299" text-anchor="end" class="chartlet-label">Tooling</text><text x="101.665" y="185" text-anchor="end" class="chartlet-label">Ease of use</text><polyline data-series="0" points="190,153.36 236.211,211.32 248.959,272.04 190,274.8 122.277,277.1 137.415,207.64 190,153.36" class="chartlet-radar-area chartlet-radar-a1"><title>Engine A</title></polyline><circle data-series="0" cx="190" cy="153.36" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Read: 92</title></circle><circle data-series="0" cx="236.211" cy="211.32" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Write: 58</title></circle><circle data-series="0" cx="248.959" cy="272.04" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Durability: 74</title></circle><circle data-series="0" cx="190" cy="274.8" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Memory: 40</title></circle><circle data-series="0" cx="122.277" cy="277.1" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Tooling: 85</title></circle><circle data-series="0" cx="137.415" cy="207.64" r="3.5" class="chartlet-radar-dot chartlet-radar-d1"><title>Engine A, Ease of use: 66</title></circle><polyline data-series="1" points="190,179.12 260.113,197.52 261.707,279.4 190,304.24 146.179,263.3 151.756,215.92 190,179.12" class="chartlet-radar-area chartlet-radar-a2"><title>Engine B</title></polyline><circle data-series="1" cx="190" cy="179.12" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Read: 64</title></circle><circle data-series="1" cx="260.113" cy="197.52" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Write: 88</title></circle><circle data-series="1" cx="261.707" cy="279.4" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Durability: 90</title></circle><circle data-series="1" cx="190" cy="304.24" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Memory: 72</title></circle><circle data-series="1" cx="146.179" cy="263.3" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Tooling: 55</title></circle><circle data-series="1" cx="151.756" cy="215.92" r="3.5" class="chartlet-radar-dot chartlet-radar-d2"><title>Engine B, Ease of use: 48</title></circle></svg></div><p class="chartlet-source">Source: Illustrative benchmark scores, 0 to 100</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Two storage engines compared</caption><thead><tr><th scope="col">Axis</th><th scope="col">Range</th><th scope="col">Engine A</th><th scope="col">Engine B</th></tr></thead><tbody><tr><th scope="row">Read</th><td>0–100</td><td>92</td><td>64</td></tr><tr><th scope="row">Write</th><td>0–100</td><td>58</td><td>88</td></tr><tr><th scope="row">Durability</th><td>0–100</td><td>74</td><td>90</td></tr><tr><th scope="row">Memory</th><td>0–100</td><td>40</td><td>72</td></tr><tr><th scope="row">Tooling</th><td>0–100</td><td>85</td><td>55</td></tr><tr><th scope="row">Ease of use</th><td>0–100</td><td>66</td><td>48</td></tr></tbody></table></details></figure></div>