chartlet 0.16.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Weekly support tickets</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-538715a1f1eeb93c" role="img" aria-labelledby="chartlet-538715a1f1eeb93c-title chartlet-538715a1f1eeb93c-description" class="chartlet-root"><title id="chartlet-538715a1f1eeb93c-title">Weekly support tickets</title><desc id="chartlet-538715a1f1eeb93c-description">Ticket volume dipped in week four and recovered afterwards, peaking in week eight.</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-538715a1f1eeb93c .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-538715a1f1eeb93c .chartlet-label,#chartlet-538715a1f1eeb93c .chartlet-tick,#chartlet-538715a1f1eeb93c .chartlet-value,#chartlet-538715a1f1eeb93c .chartlet-value-inverse,#chartlet-538715a1f1eeb93c .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-538715a1f1eeb93c .chartlet-value,#chartlet-538715a1f1eeb93c .chartlet-value-inverse{font-weight:600}#chartlet-538715a1f1eeb93c .chartlet-value{fill:var(--chartlet-text)}#chartlet-538715a1f1eeb93c .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-538715a1f1eeb93c .chartlet-axis-title{font-weight:600}#chartlet-538715a1f1eeb93c .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-538715a1f1eeb93c .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-538715a1f1eeb93c .chartlet-bar,#chartlet-538715a1f1eeb93c .chartlet-point{fill:var(--chartlet-accent)}#chartlet-538715a1f1eeb93c .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-538715a1f1eeb93c .chartlet-background{fill:var(--chartlet-background)}</style><line x1="72" y1="368" x2="776" y2="368" class="chartlet-grid"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">80</text><line x1="72" y1="301.2" x2="776" y2="301.2" class="chartlet-grid"/><text x="62" y="305.2" text-anchor="end" class="chartlet-tick">100</text><line x1="72" y1="234.4" x2="776" y2="234.4" class="chartlet-grid"/><text x="62" y="238.4" text-anchor="end" class="chartlet-tick">120</text><line x1="72" y1="167.6" x2="776" y2="167.6" class="chartlet-grid"/><text x="62" y="171.6" text-anchor="end" class="chartlet-tick">140</text><line x1="72" y1="100.8" x2="776" y2="100.8" class="chartlet-grid"/><text x="62" y="104.8" text-anchor="end" class="chartlet-tick">160</text><line x1="72" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">180</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Tickets</text><circle cx="78" cy="207.68" r="4" class="chartlet-point"><title>Week 1: 128</title></circle><text x="78" y="197.68" text-anchor="middle" class="chartlet-value">128</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">Week 1</text><circle cx="176.857" cy="187.64" r="4" class="chartlet-point"><title>Week 2: 134</title></circle><text x="176.857" y="177.64" text-anchor="middle" class="chartlet-value">134</text><text x="176.857" y="392" text-anchor="middle" class="chartlet-label">Week 2</text><circle cx="275.714" cy="231.06" r="4" class="chartlet-point"><title>Week 3: 121</title></circle><text x="275.714" y="221.06" text-anchor="middle" class="chartlet-value">121</text><text x="275.714" y="392" text-anchor="middle" class="chartlet-label">Week 3</text><circle cx="374.571" cy="314.56" r="4" class="chartlet-point"><title>Week 4: 96</title></circle><text x="374.571" y="304.56" text-anchor="middle" class="chartlet-value">96</text><text x="374.571" y="392" text-anchor="middle" class="chartlet-label">Week 4</text><circle cx="473.429" cy="160.92" r="4" class="chartlet-point"><title>Week 5: 142</title></circle><text x="473.429" y="150.92" text-anchor="middle" class="chartlet-value">142</text><text x="473.429" y="392" text-anchor="middle" class="chartlet-label">Week 5</text><circle cx="572.286" cy="107.48" r="4" class="chartlet-point"><title>Week 6: 158</title></circle><text x="572.286" y="97.48" text-anchor="middle" class="chartlet-value">158</text><text x="572.286" y="392" text-anchor="middle" class="chartlet-label">Week 6</text><circle cx="671.143" cy="137.54" r="4" class="chartlet-point"><title>Week 7: 149</title></circle><text x="671.143" y="127.54" text-anchor="middle" class="chartlet-value">149</text><text x="671.143" y="392" text-anchor="middle" class="chartlet-label">Week 7</text><circle cx="770" cy="90.78" r="4" class="chartlet-point"><title>Week 8: 163</title></circle><text x="770" y="80.78" text-anchor="middle" class="chartlet-value">163</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">Week 8</text><polyline points="78,207.68 176.857,187.64 275.714,231.06 374.571,314.56 473.429,160.92 572.286,107.48 671.143,137.54 770,90.78" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Week</text></svg><p class="chartlet-source">Source: Example data</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Weekly support tickets</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">Week 1</th><td>128</td></tr><tr><th scope="row">Week 2</th><td>134</td></tr><tr><th scope="row">Week 3</th><td>121</td></tr><tr><th scope="row">Week 4</th><td>96</td></tr><tr><th scope="row">Week 5</th><td>142</td></tr><tr><th scope="row">Week 6</th><td>158</td></tr><tr><th scope="row">Week 7</th><td>149</td></tr><tr><th scope="row">Week 8</th><td>163</td></tr></tbody></table></details></figure>