chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Daily orders</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-e4a6825db18c1d09" role="img" aria-labelledby="chartlet-e4a6825db18c1d09-title chartlet-e4a6825db18c1d09-description" class="chartlet-root"><title id="chartlet-e4a6825db18c1d09-title">Daily orders</title><desc id="chartlet-e4a6825db18c1d09-description">Orders per day over two weeks; the weekend dips are visible as local minima.</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-e4a6825db18c1d09 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-e4a6825db18c1d09 .chartlet-label,#chartlet-e4a6825db18c1d09 .chartlet-tick,#chartlet-e4a6825db18c1d09 .chartlet-value,#chartlet-e4a6825db18c1d09 .chartlet-value-inverse,#chartlet-e4a6825db18c1d09 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-e4a6825db18c1d09 .chartlet-value,#chartlet-e4a6825db18c1d09 .chartlet-value-inverse{font-weight:600}#chartlet-e4a6825db18c1d09 .chartlet-value{fill:var(--chartlet-text)}#chartlet-e4a6825db18c1d09 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-e4a6825db18c1d09 .chartlet-axis-title{font-weight:600}#chartlet-e4a6825db18c1d09 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-e4a6825db18c1d09 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-e4a6825db18c1d09 .chartlet-bar,#chartlet-e4a6825db18c1d09 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-e4a6825db18c1d09 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-e4a6825db18c1d09 .chartlet-background{fill:var(--chartlet-background)}#chartlet-e4a6825db18c1d09 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-e4a6825db18c1d09 .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-e4a6825db18c1d09 .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-e4a6825db18c1d09 .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-e4a6825db18c1d09 .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-e4a6825db18c1d09 .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-e4a6825db18c1d09 .chartlet-hit{fill:transparent;stroke:none}</style><line x1="43.773" y1="394" x2="776" y2="394" class="chartlet-grid"/><text x="33.773" y="398" text-anchor="end" class="chartlet-tick">100</text><line x1="43.773" y1="322" x2="776" y2="322" class="chartlet-grid"/><text x="33.773" y="326" text-anchor="end" class="chartlet-tick">200</text><line x1="43.773" y1="250" x2="776" y2="250" class="chartlet-grid"/><text x="33.773" y="254" text-anchor="end" class="chartlet-tick">300</text><line x1="43.773" y1="178" x2="776" y2="178" class="chartlet-grid"/><text x="33.773" y="182" text-anchor="end" class="chartlet-tick">400</text><line x1="43.773" y1="106" x2="776" y2="106" class="chartlet-grid"/><text x="33.773" y="110" text-anchor="end" class="chartlet-tick">500</text><line x1="43.773" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="33.773" y="38" text-anchor="end" class="chartlet-tick">600</text><line x1="49.773" y1="34" x2="49.773" y2="394" class="chartlet-grid"/><text x="49.773" y="418" text-anchor="middle" class="chartlet-tick">2026-02-02</text><line x1="160.577" y1="34" x2="160.577" y2="394" class="chartlet-grid"/><text x="160.577" y="418" text-anchor="middle" class="chartlet-tick">2026-02-04</text><line x1="271.381" y1="34" x2="271.381" y2="394" class="chartlet-grid"/><text x="271.381" y="418" text-anchor="middle" class="chartlet-tick">2026-02-06</text><line x1="382.185" y1="34" x2="382.185" y2="394" class="chartlet-grid"/><text x="382.185" y="418" text-anchor="middle" class="chartlet-tick">2026-02-08</text><line x1="492.99" y1="34" x2="492.99" y2="394" class="chartlet-grid"/><text x="492.99" y="418" text-anchor="middle" class="chartlet-tick">2026-02-10</text><line x1="603.794" y1="34" x2="603.794" y2="394" class="chartlet-grid"/><text x="603.794" y="418" text-anchor="middle" class="chartlet-tick">2026-02-12</text><line x1="714.598" y1="34" x2="714.598" y2="394" class="chartlet-grid"/><text x="714.598" y="418" text-anchor="middle" class="chartlet-tick">2026-02-14</text><text x="43.773" y="14" text-anchor="start" class="chartlet-axis-title">Orders</text><polyline points="49.773,169.36 105.175,150.64 160.577,138.4 215.979,126.88 271.381,100.24 326.783,321.28 382.185,339.28 437.587,113.92 492.99,97.36 548.392,108.16 603.794,81.52 659.196,62.08 714.598,301.84 770,325.6" class="chartlet-line chartlet-line-series-1"/><circle cx="49.773" cy="169.36" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-02 – Orders: 412</title></circle><text x="49.773" y="159.36" text-anchor="middle" class="chartlet-value">412</text><circle cx="105.175" cy="150.64" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-03 – Orders: 438</title></circle><text x="105.175" y="140.64" text-anchor="middle" class="chartlet-value">438</text><circle cx="160.577" cy="138.4" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-04 – Orders: 455</title></circle><text x="160.577" y="128.4" text-anchor="middle" class="chartlet-value">455</text><circle cx="215.979" cy="126.88" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-05 – Orders: 471</title></circle><text x="215.979" y="116.88" text-anchor="middle" class="chartlet-value">471</text><circle cx="271.381" cy="100.24" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-06 – Orders: 508</title></circle><text x="271.381" y="90.24" text-anchor="middle" class="chartlet-value">508</text><circle cx="326.783" cy="321.28" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-07 – Orders: 201</title></circle><text x="326.783" y="311.28" text-anchor="middle" class="chartlet-value">201</text><circle cx="382.185" cy="339.28" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-08 – Orders: 176</title></circle><text x="382.185" y="329.28" text-anchor="middle" class="chartlet-value">176</text><circle cx="437.587" cy="113.92" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-09 – Orders: 489</title></circle><text x="437.587" y="103.92" text-anchor="middle" class="chartlet-value">489</text><circle cx="492.99" cy="97.36" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-10 – Orders: 512</title></circle><text x="492.99" y="87.36" text-anchor="middle" class="chartlet-value">512</text><circle cx="548.392" cy="108.16" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-11 – Orders: 497</title></circle><text x="548.392" y="98.16" text-anchor="middle" class="chartlet-value">497</text><circle cx="603.794" cy="81.52" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-12 – Orders: 534</title></circle><text x="603.794" y="71.52" text-anchor="middle" class="chartlet-value">534</text><circle cx="659.196" cy="62.08" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-13 – Orders: 561</title></circle><text x="659.196" y="52.08" text-anchor="middle" class="chartlet-value">561</text><circle cx="714.598" cy="301.84" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-14 – Orders: 228</title></circle><text x="714.598" y="291.84" text-anchor="middle" class="chartlet-value">228</text><circle cx="770" cy="325.6" r="4" class="chartlet-point chartlet-point-series-1"><title>2026-02-15 – Orders: 195</title></circle><text x="770" y="315.6" text-anchor="middle" class="chartlet-value">195</text><text x="409.886" y="436" text-anchor="middle" class="chartlet-axis-title">Day</text></svg><p class="chartlet-source">Source: Example data, chartlet</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Daily orders</caption><thead><tr><th scope="col">Time</th><th scope="col">Orders</th></tr></thead><tbody><tr><th scope="row">2026-02-02</th><td>412</td></tr><tr><th scope="row">2026-02-03</th><td>438</td></tr><tr><th scope="row">2026-02-04</th><td>455</td></tr><tr><th scope="row">2026-02-05</th><td>471</td></tr><tr><th scope="row">2026-02-06</th><td>508</td></tr><tr><th scope="row">2026-02-07</th><td>201</td></tr><tr><th scope="row">2026-02-08</th><td>176</td></tr><tr><th scope="row">2026-02-09</th><td>489</td></tr><tr><th scope="row">2026-02-10</th><td>512</td></tr><tr><th scope="row">2026-02-11</th><td>497</td></tr><tr><th scope="row">2026-02-12</th><td>534</td></tr><tr><th scope="row">2026-02-13</th><td>561</td></tr><tr><th scope="row">2026-02-14</th><td>228</td></tr><tr><th scope="row">2026-02-15</th><td>195</td></tr></tbody></table></details></figure>