chartlet 0.1.0-alpha.4

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper"><style>.chartlet-zoom{border:none;padding:0;margin:0 0 12px 0}.chartlet-zoom legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-zoom label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-zoom input{margin-right:4px}.chartlet-zoom input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-panel{display:none}.chartlet-wrapper:has(.chartlet-zoom input.zoom-0:checked) .chartlet-panel-0{display:block}.chartlet-wrapper:has(.chartlet-zoom input.zoom-1:checked) .chartlet-panel-1{display:block}.chartlet-wrapper:has(.chartlet-zoom input.zoom-2:checked) .chartlet-panel-2{display:block}.chartlet-wrapper:has(.chartlet-zoom input.zoom-3:checked) .chartlet-panel-3{display:block}</style><fieldset class="chartlet-zoom"><legend>View</legend><label><input type="radio" name="zoom-chartlet-2f8a68e86f760177" class="zoom-0" checked> All months</label><label><input type="radio" name="zoom-chartlet-2f8a68e86f760177" class="zoom-1"> January to April</label><label><input type="radio" name="zoom-chartlet-2f8a68e86f760177" class="zoom-2"> May to August</label></fieldset><figure class="chartlet-figure"><figcaption>Headcount</figcaption><div class="chartlet-panel chartlet-panel-0"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" role="img" aria-labelledby="chartlet-2f8a68e86f760177-z0-title chartlet-2f8a68e86f760177-z0-description" class="chartlet-root"><title id="chartlet-2f8a68e86f760177-z0-title">Headcount</title><desc id="chartlet-2f8a68e86f760177-z0-description">Headcount rose steadily from January to August.</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-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}.chartlet-label,.chartlet-tick,.chartlet-value,.chartlet-value-inverse,.chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}.chartlet-value,.chartlet-value-inverse{font-weight:600}.chartlet-value{fill:var(--chartlet-text)}.chartlet-value-inverse{fill:var(--chartlet-background)}.chartlet-axis-title{font-weight:600}.chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}.chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}.chartlet-bar,.chartlet-point{fill:var(--chartlet-accent)}.chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chartlet-background{fill:var(--chartlet-background)}</style><text x="72" y="30" text-anchor="start" class="chartlet-title">Headcount</text><line x1="72" y1="368" x2="776" y2="368" class="chartlet-grid"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">40</text><line x1="72" y1="271.333" x2="776" y2="271.333" class="chartlet-grid"/><text x="62" y="275.333" text-anchor="end" class="chartlet-tick">50</text><line x1="72" y1="174.667" x2="776" y2="174.667" class="chartlet-grid"/><text x="62" y="178.667" text-anchor="end" class="chartlet-tick">60</text><line x1="72" y1="78" x2="776" y2="78" class="chartlet-grid"/><text x="62" y="82" text-anchor="end" class="chartlet-tick">70</text><text x="72" y="58" text-anchor="start" class="chartlet-axis-title">Employees</text><circle cx="78" cy="348.667" r="4" class="chartlet-point"><title>January: 42</title></circle><text x="78" y="338.667" text-anchor="middle" class="chartlet-value">42</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">January</text><circle cx="176.857" cy="329.333" r="4" class="chartlet-point"><title>February: 44</title></circle><text x="176.857" y="319.333" text-anchor="middle" class="chartlet-value">44</text><text x="176.857" y="392" text-anchor="middle" class="chartlet-label">February</text><circle cx="275.714" cy="300.333" r="4" class="chartlet-point"><title>March: 47</title></circle><text x="275.714" y="290.333" text-anchor="middle" class="chartlet-value">47</text><text x="275.714" y="392" text-anchor="middle" class="chartlet-label">March</text><circle cx="374.571" cy="271.333" r="4" class="chartlet-point"><title>April: 50</title></circle><text x="374.571" y="261.333" text-anchor="middle" class="chartlet-value">50</text><text x="374.571" y="392" text-anchor="middle" class="chartlet-label">April</text><circle cx="473.429" cy="232.667" r="4" class="chartlet-point"><title>May: 54</title></circle><text x="473.429" y="222.667" text-anchor="middle" class="chartlet-value">54</text><text x="473.429" y="392" text-anchor="middle" class="chartlet-label">May</text><circle cx="572.286" cy="194" r="4" class="chartlet-point"><title>June: 58</title></circle><text x="572.286" y="184" text-anchor="middle" class="chartlet-value">58</text><text x="572.286" y="392" text-anchor="middle" class="chartlet-label">June</text><circle cx="671.143" cy="165" r="4" class="chartlet-point"><title>July: 61</title></circle><text x="671.143" y="155" text-anchor="middle" class="chartlet-value">61</text><text x="671.143" y="392" text-anchor="middle" class="chartlet-label">July</text><circle cx="770" cy="116.667" r="4" class="chartlet-point"><title>August: 66</title></circle><text x="770" y="106.667" text-anchor="middle" class="chartlet-value">66</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">August</text><polyline points="78,348.667 176.857,329.333 275.714,300.333 374.571,271.333 473.429,232.667 572.286,194 671.143,165 770,116.667" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Month</text></svg></div><div class="chartlet-panel chartlet-panel-1"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" role="img" aria-labelledby="chartlet-2f8a68e86f760177-z1-title chartlet-2f8a68e86f760177-z1-description" class="chartlet-root"><title id="chartlet-2f8a68e86f760177-z1-title">Headcount</title><desc id="chartlet-2f8a68e86f760177-z1-description">Headcount rose steadily from January to August.</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-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}.chartlet-label,.chartlet-tick,.chartlet-value,.chartlet-value-inverse,.chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}.chartlet-value,.chartlet-value-inverse{font-weight:600}.chartlet-value{fill:var(--chartlet-text)}.chartlet-value-inverse{fill:var(--chartlet-background)}.chartlet-axis-title{font-weight:600}.chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}.chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}.chartlet-bar,.chartlet-point{fill:var(--chartlet-accent)}.chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chartlet-background{fill:var(--chartlet-background)}</style><text x="72" y="30" text-anchor="start" class="chartlet-title">Headcount</text><line x1="72" y1="368" x2="776" y2="368" class="chartlet-grid"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">40</text><line x1="72" y1="319.667" x2="776" y2="319.667" class="chartlet-grid"/><text x="62" y="323.667" text-anchor="end" class="chartlet-tick">42</text><line x1="72" y1="271.333" x2="776" y2="271.333" class="chartlet-grid"/><text x="62" y="275.333" text-anchor="end" class="chartlet-tick">44</text><line x1="72" y1="223" x2="776" y2="223" class="chartlet-grid"/><text x="62" y="227" text-anchor="end" class="chartlet-tick">46</text><line x1="72" y1="174.667" x2="776" y2="174.667" class="chartlet-grid"/><text x="62" y="178.667" text-anchor="end" class="chartlet-tick">48</text><line x1="72" y1="126.333" x2="776" y2="126.333" class="chartlet-grid"/><text x="62" y="130.333" text-anchor="end" class="chartlet-tick">50</text><line x1="72" y1="78" x2="776" y2="78" class="chartlet-grid"/><text x="62" y="82" text-anchor="end" class="chartlet-tick">52</text><text x="72" y="58" text-anchor="start" class="chartlet-axis-title">Employees</text><circle cx="78" cy="319.667" r="4" class="chartlet-point"><title>January: 42</title></circle><text x="78" y="309.667" text-anchor="middle" class="chartlet-value">42</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">January</text><circle cx="308.667" cy="271.333" r="4" class="chartlet-point"><title>February: 44</title></circle><text x="308.667" y="261.333" text-anchor="middle" class="chartlet-value">44</text><text x="308.667" y="392" text-anchor="middle" class="chartlet-label">February</text><circle cx="539.333" cy="198.833" r="4" class="chartlet-point"><title>March: 47</title></circle><text x="539.333" y="188.833" text-anchor="middle" class="chartlet-value">47</text><text x="539.333" y="392" text-anchor="middle" class="chartlet-label">March</text><circle cx="770" cy="126.333" r="4" class="chartlet-point"><title>April: 50</title></circle><text x="770" y="116.333" text-anchor="middle" class="chartlet-value">50</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">April</text><polyline points="78,319.667 308.667,271.333 539.333,198.833 770,126.333" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Month</text></svg></div><div class="chartlet-panel chartlet-panel-2"><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" role="img" aria-labelledby="chartlet-2f8a68e86f760177-z2-title chartlet-2f8a68e86f760177-z2-description" class="chartlet-root"><title id="chartlet-2f8a68e86f760177-z2-title">Headcount</title><desc id="chartlet-2f8a68e86f760177-z2-description">Headcount rose steadily from January to August.</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-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}.chartlet-label,.chartlet-tick,.chartlet-value,.chartlet-value-inverse,.chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}.chartlet-value,.chartlet-value-inverse{font-weight:600}.chartlet-value{fill:var(--chartlet-text)}.chartlet-value-inverse{fill:var(--chartlet-background)}.chartlet-axis-title{font-weight:600}.chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}.chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}.chartlet-bar,.chartlet-point{fill:var(--chartlet-accent)}.chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chartlet-background{fill:var(--chartlet-background)}</style><text x="72" y="30" text-anchor="start" class="chartlet-title">Headcount</text><line x1="72" y1="368" x2="776" y2="368" class="chartlet-grid"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">50</text><line x1="72" y1="295.5" x2="776" y2="295.5" class="chartlet-grid"/><text x="62" y="299.5" text-anchor="end" class="chartlet-tick">55</text><line x1="72" y1="223" x2="776" y2="223" class="chartlet-grid"/><text x="62" y="227" text-anchor="end" class="chartlet-tick">60</text><line x1="72" y1="150.5" x2="776" y2="150.5" class="chartlet-grid"/><text x="62" y="154.5" text-anchor="end" class="chartlet-tick">65</text><line x1="72" y1="78" x2="776" y2="78" class="chartlet-grid"/><text x="62" y="82" text-anchor="end" class="chartlet-tick">70</text><text x="72" y="58" text-anchor="start" class="chartlet-axis-title">Employees</text><circle cx="78" cy="310" r="4" class="chartlet-point"><title>May: 54</title></circle><text x="78" y="300" text-anchor="middle" class="chartlet-value">54</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">May</text><circle cx="308.667" cy="252" r="4" class="chartlet-point"><title>June: 58</title></circle><text x="308.667" y="242" text-anchor="middle" class="chartlet-value">58</text><text x="308.667" y="392" text-anchor="middle" class="chartlet-label">June</text><circle cx="539.333" cy="208.5" r="4" class="chartlet-point"><title>July: 61</title></circle><text x="539.333" y="198.5" text-anchor="middle" class="chartlet-value">61</text><text x="539.333" y="392" text-anchor="middle" class="chartlet-label">July</text><circle cx="770" cy="136" r="4" class="chartlet-point"><title>August: 66</title></circle><text x="770" y="126" text-anchor="middle" class="chartlet-value">66</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">August</text><polyline points="78,310 308.667,252 539.333,208.5 770,136" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Month</text></svg></div><p class="chartlet-source">Source: Example data</p><details class="chartlet-data"><summary>Show chart data</summary><table><caption>Data for Headcount</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">January</th><td>42</td></tr><tr><th scope="row">February</th><td>44</td></tr><tr><th scope="row">March</th><td>47</td></tr><tr><th scope="row">April</th><td>50</td></tr><tr><th scope="row">May</th><td>54</td></tr><tr><th scope="row">June</th><td>58</td></tr><tr><th scope="row">July</th><td>61</td></tr><tr><th scope="row">August</th><td>66</td></tr></tbody></table></details></figure></div>