chartlet 0.23.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Active shoppers per month</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-5587602ae74bec3c" role="img" aria-labelledby="chartlet-5587602ae74bec3c-title chartlet-5587602ae74bec3c-description" class="chartlet-root chartlet-look-editorial"><title id="chartlet-5587602ae74bec3c-title">Active shoppers per month</title><desc id="chartlet-5587602ae74bec3c-description">Active shoppers grew through June.</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-5587602ae74bec3c .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-5587602ae74bec3c .chartlet-label,#chartlet-5587602ae74bec3c .chartlet-tick,#chartlet-5587602ae74bec3c .chartlet-value,#chartlet-5587602ae74bec3c .chartlet-value-inverse,#chartlet-5587602ae74bec3c .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-5587602ae74bec3c .chartlet-value,#chartlet-5587602ae74bec3c .chartlet-value-inverse{font-weight:600}#chartlet-5587602ae74bec3c .chartlet-value{fill:var(--chartlet-text)}#chartlet-5587602ae74bec3c .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-5587602ae74bec3c .chartlet-axis-title{font-weight:600}#chartlet-5587602ae74bec3c .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-5587602ae74bec3c .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-5587602ae74bec3c .chartlet-bar,#chartlet-5587602ae74bec3c .chartlet-point{fill:var(--chartlet-accent)}#chartlet-5587602ae74bec3c .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-5587602ae74bec3c .chartlet-background{fill:var(--chartlet-background)}.chartlet-root.chartlet-look-editorial{--chartlet-text:#1d1c1a;--chartlet-muted:#4d4a44;--chartlet-grid:#d8d4ca;--chartlet-zero:#6b665c;--chartlet-accent:#0b6a88;--chartlet-background:#fcfbf8;--chartlet-color-1:#0b6a88;--chartlet-color-2:#a8431a;--chartlet-color-3:#6b665c;--chartlet-color-4:#1d1c1a;--chartlet-node:#f2efe8;--chartlet-lane:#fcfbf8;--chartlet-lane-head:#f2efe8;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#6b665c;--chartlet-role-blue-fill:#f2efe8;--chartlet-role-green:#6b665c;--chartlet-role-green-fill:#f2efe8;--chartlet-role-amber:#6b665c;--chartlet-role-amber-fill:#f2efe8;--chartlet-role-teal:#6b665c;--chartlet-role-teal-fill:#f2efe8;--chartlet-role-violet:#4d4a44;--chartlet-role-violet-fill:#f2efe8;--chartlet-role-gray:#6b665c;--chartlet-role-gray-fill:#f2efe8;--chartlet-role-red:#a8281c;--chartlet-role-red-fill:#fbefec}.chartlet-root.chartlet-look-editorial.chartlet-theme-dark:not(.chartlet-blueprint){--chartlet-text:#ece8df;--chartlet-muted:#b7b2a7;--chartlet-grid:#3a3840;--chartlet-zero:#8f8a80;--chartlet-accent:#62b8d4;--chartlet-background:#17161a;--chartlet-color-1:#62b8d4;--chartlet-color-2:#e0916a;--chartlet-color-3:#9a958a;--chartlet-color-4:#ece8df;--chartlet-node:#222127;--chartlet-lane:#17161a;--chartlet-lane-head:#222127;--chartlet-shadow:rgba(0,0,0,0);--chartlet-role-blue:#8f8a80;--chartlet-role-blue-fill:#222127;--chartlet-role-green:#8f8a80;--chartlet-role-green-fill:#222127;--chartlet-role-amber:#8f8a80;--chartlet-role-amber-fill:#222127;--chartlet-role-teal:#8f8a80;--chartlet-role-teal-fill:#222127;--chartlet-role-violet:#c9c4b8;--chartlet-role-violet-fill:#222127;--chartlet-role-gray:#8f8a80;--chartlet-role-gray-fill:#222127;--chartlet-role-red:#f08a7e;--chartlet-role-red-fill:#2d1f1e}</style><line x1="72" y1="368" x2="776" y2="368" class="chartlet-grid"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">1000</text><line x1="72" y1="312.333" x2="776" y2="312.333" class="chartlet-grid"/><text x="62" y="316.333" text-anchor="end" class="chartlet-tick">1200</text><line x1="72" y1="256.667" x2="776" y2="256.667" class="chartlet-grid"/><text x="62" y="260.667" text-anchor="end" class="chartlet-tick">1400</text><line x1="72" y1="201" x2="776" y2="201" class="chartlet-grid"/><text x="62" y="205" text-anchor="end" class="chartlet-tick">1600</text><line x1="72" y1="145.333" x2="776" y2="145.333" class="chartlet-grid"/><text x="62" y="149.333" text-anchor="end" class="chartlet-tick">1800</text><line x1="72" y1="89.667" x2="776" y2="89.667" class="chartlet-grid"/><text x="62" y="93.667" text-anchor="end" class="chartlet-tick">2000</text><line x1="72" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">2200</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Active shoppers</text><circle cx="78" cy="312.333" r="4" class="chartlet-point"><title>January: 1200</title></circle><text x="78" y="302.333" text-anchor="middle" class="chartlet-value">1200</text><text x="78" y="392" text-anchor="middle" class="chartlet-label">January</text><circle cx="216.4" cy="239.967" r="4" class="chartlet-point"><title>February: 1460</title></circle><text x="216.4" y="229.967" text-anchor="middle" class="chartlet-value">1460</text><text x="216.4" y="392" text-anchor="middle" class="chartlet-label">February</text><circle cx="354.8" cy="259.45" r="4" class="chartlet-point"><title>March: 1390</title></circle><text x="354.8" y="249.45" text-anchor="middle" class="chartlet-value">1390</text><text x="354.8" y="392" text-anchor="middle" class="chartlet-label">March</text><circle cx="493.2" cy="195.433" r="4" class="chartlet-point"><title>April: 1620</title></circle><text x="493.2" y="185.433" text-anchor="middle" class="chartlet-value">1620</text><text x="493.2" y="392" text-anchor="middle" class="chartlet-label">April</text><circle cx="631.6" cy="142.55" r="4" class="chartlet-point"><title>May: 1810</title></circle><text x="631.6" y="132.55" text-anchor="middle" class="chartlet-value">1810</text><text x="631.6" y="392" text-anchor="middle" class="chartlet-label">May</text><circle cx="770" cy="75.75" r="4" class="chartlet-point"><title>June: 2050</title></circle><text x="770" y="65.75" text-anchor="middle" class="chartlet-value">2050</text><text x="770" y="392" text-anchor="middle" class="chartlet-label">June</text><polyline points="78,312.333 216.4,239.967 354.8,259.45 493.2,195.433 631.6,142.55 770,75.75" class="chartlet-line"/><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Month</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 Active shoppers per month</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">January</th><td>1200</td></tr><tr><th scope="row">February</th><td>1460</td></tr><tr><th scope="row">March</th><td>1390</td></tr><tr><th scope="row">April</th><td>1620</td></tr><tr><th scope="row">May</th><td>1810</td></tr><tr><th scope="row">June</th><td>2050</td></tr></tbody></table></details></figure>