chartlet 0.12.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Open support tickets by region</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-98dfa6a2a5b843dd" role="img" aria-labelledby="chartlet-98dfa6a2a5b843dd-title chartlet-98dfa6a2a5b843dd-description" class="chartlet-root"><title id="chartlet-98dfa6a2a5b843dd-title">Open support tickets by region</title><desc id="chartlet-98dfa6a2a5b843dd-description">Bar chart with 5 categories. Highest: 4,860 (North America). Lowest: 1,240 (Middle East &amp; Africa). Reference lines: Target at 2,500.</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-98dfa6a2a5b843dd .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-98dfa6a2a5b843dd .chartlet-label,#chartlet-98dfa6a2a5b843dd .chartlet-tick,#chartlet-98dfa6a2a5b843dd .chartlet-value,#chartlet-98dfa6a2a5b843dd .chartlet-value-inverse,#chartlet-98dfa6a2a5b843dd .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-98dfa6a2a5b843dd .chartlet-value,#chartlet-98dfa6a2a5b843dd .chartlet-value-inverse{font-weight:600}#chartlet-98dfa6a2a5b843dd .chartlet-value{fill:var(--chartlet-text)}#chartlet-98dfa6a2a5b843dd .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-98dfa6a2a5b843dd .chartlet-axis-title{font-weight:600}#chartlet-98dfa6a2a5b843dd .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-98dfa6a2a5b843dd .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-98dfa6a2a5b843dd .chartlet-bar,#chartlet-98dfa6a2a5b843dd .chartlet-point{fill:var(--chartlet-accent)}#chartlet-98dfa6a2a5b843dd .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-98dfa6a2a5b843dd .chartlet-background{fill:var(--chartlet-background)}#chartlet-98dfa6a2a5b843dd .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-98dfa6a2a5b843dd .chartlet-rule-label{font-size:12px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}</style><line x1="151.12" y1="34" x2="151.12" y2="394" class="chartlet-zero"/><text x="151.12" y="416" text-anchor="middle" class="chartlet-tick">0</text><line x1="267.296" y1="34" x2="267.296" y2="394" class="chartlet-grid"/><text x="267.296" y="416" text-anchor="middle" class="chartlet-tick">1,000</text><line x1="383.472" y1="34" x2="383.472" y2="394" class="chartlet-grid"/><text x="383.472" y="416" text-anchor="middle" class="chartlet-tick">2,000</text><line x1="499.648" y1="34" x2="499.648" y2="394" class="chartlet-grid"/><text x="499.648" y="416" text-anchor="middle" class="chartlet-tick">3,000</text><line x1="615.824" y1="34" x2="615.824" y2="394" class="chartlet-grid"/><text x="615.824" y="416" text-anchor="middle" class="chartlet-tick">4,000</text><line x1="732" y1="34" x2="732" y2="394" class="chartlet-grid"/><text x="732" y="416" text-anchor="middle" class="chartlet-tick">5,000</text><text x="441.56" y="438" text-anchor="middle" class="chartlet-axis-title">Open tickets</text><polyline points="441.56,34 441.56,394" class="chartlet-rule"><title>Target: 2,500</title></polyline><rect x="151.12" y="46.96" width="564.615" height="46.08" class="chartlet-bar"><title>North America: 4,860</title></rect><text x="723.735" y="74" text-anchor="start" class="chartlet-value">4,860</text><text x="139.12" y="74" text-anchor="end" class="chartlet-label">North America</text><rect x="151.12" y="118.96" width="363.05" height="46.08" class="chartlet-bar"><title>Europe: 3,125</title></rect><text x="522.17" y="146" text-anchor="start" class="chartlet-value">3,125</text><text x="139.12" y="146" text-anchor="end" class="chartlet-label">Europe</text><rect x="151.12" y="190.96" width="256.749" height="46.08" class="chartlet-bar"><title>Latin America: 2,210</title></rect><text x="447.56" y="218" text-anchor="start" class="chartlet-value">2,210</text><text x="139.12" y="218" text-anchor="end" class="chartlet-label">Latin America</text><rect x="151.12" y="262.96" width="217.83" height="46.08" class="chartlet-bar"><title>Asia Pacific: 1,875</title></rect><text x="376.95" y="290" text-anchor="start" class="chartlet-value">1,875</text><text x="139.12" y="290" text-anchor="end" class="chartlet-label">Asia Pacific</text><rect x="151.12" y="334.96" width="144.058" height="46.08" class="chartlet-bar"><title>Middle East &amp; Africa: 1,240</title></rect><text x="303.178" y="362" text-anchor="start" class="chartlet-value">1,240</text><text x="139.12" y="362" text-anchor="end" class="chartlet-label">Middle East &amp; Africa</text><text x="445.56" y="28" text-anchor="start" class="chartlet-rule-label">Target</text></svg><p class="chartlet-source">Source: Sample data</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Open support tickets by region</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">North America</th><td>4,860</td></tr><tr><th scope="row">Europe</th><td>3,125</td></tr><tr><th scope="row">Latin America</th><td>2,210</td></tr><tr><th scope="row">Asia Pacific</th><td>1,875</td></tr><tr><th scope="row">Middle East &amp; Africa</th><td>1,240</td></tr></tbody></table></details></figure>