chartlet 0.23.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><fieldset class="chartlet-filter"><legend>Series</legend><label><input type="checkbox" class="series-0" checked> North</label><label><input type="checkbox" class="series-1" checked> South</label><label><input type="checkbox" class="series-2" checked> East</label><label><input type="checkbox" class="series-3" checked> West</label></fieldset><figure class="chartlet-figure" data-viz="chart"><figcaption>Revenue by region, 2024 and 2025</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="640" height="400" viewBox="0 0 640 400" id="chartlet-57786d15e36bb90f" role="img" aria-labelledby="chartlet-57786d15e36bb90f-title chartlet-57786d15e36bb90f-description" class="chartlet-root"><title id="chartlet-57786d15e36bb90f-title">Revenue by region, 2024 and 2025</title><desc id="chartlet-57786d15e36bb90f-description">Slope chart of 4 series from 2024 to 2025: North 42 → 55 (+13); South 38 → 36 (−2); East 51 → 49 (−2); West 29 → 41 (+12). Largest rise: North (+13). Largest fall: South (−2).</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-57786d15e36bb90f .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-57786d15e36bb90f .chartlet-label,#chartlet-57786d15e36bb90f .chartlet-tick,#chartlet-57786d15e36bb90f .chartlet-value,#chartlet-57786d15e36bb90f .chartlet-value-inverse,#chartlet-57786d15e36bb90f .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-57786d15e36bb90f .chartlet-value,#chartlet-57786d15e36bb90f .chartlet-value-inverse{font-weight:600}#chartlet-57786d15e36bb90f .chartlet-value{fill:var(--chartlet-text)}#chartlet-57786d15e36bb90f .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-57786d15e36bb90f .chartlet-axis-title{font-weight:600}#chartlet-57786d15e36bb90f .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-57786d15e36bb90f .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-57786d15e36bb90f .chartlet-bar,#chartlet-57786d15e36bb90f .chartlet-point{fill:var(--chartlet-accent)}#chartlet-57786d15e36bb90f .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-57786d15e36bb90f .chartlet-background{fill:var(--chartlet-background)}#chartlet-57786d15e36bb90f .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-57786d15e36bb90f .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f .chartlet-series-4{fill:var(--chartlet-color-4)}.chartlet-wrapper{display:inline-block;max-width:100%}.chartlet-filter{border:none;padding:0;margin:0 0 12px 0}.chartlet-filter legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-filter label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-filter input{margin-right:4px}.chartlet-filter input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-filter input.series-0:not(:checked)) .chartlet-root [data-series="0"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-1:not(:checked)) .chartlet-root [data-series="1"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-2:not(:checked)) .chartlet-root [data-series="2"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-3:not(:checked)) .chartlet-root [data-series="3"]{display:none}#chartlet-57786d15e36bb90f .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-57786d15e36bb90f .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-57786d15e36bb90f .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f .chartlet-hit{fill:transparent;stroke:none}#chartlet-57786d15e36bb90f .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-57786d15e36bb90f .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-57786d15e36bb90f .chartlet-hatch{stroke:none}#chartlet-57786d15e36bb90f .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-57786d15e36bb90f .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-57786d15e36bb90f .chartlet-line-thin{stroke-width:1}#chartlet-57786d15e36bb90f .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-57786d15e36bb90f .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-57786d15e36bb90f .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}#chartlet-57786d15e36bb90f .chartlet-area{stroke:none;fill-opacity:.18}#chartlet-57786d15e36bb90f .chartlet-line-dashed{stroke-dasharray:7 5}#chartlet-57786d15e36bb90f .chartlet-line-dotted{stroke-dasharray:0 7}#chartlet-57786d15e36bb90f .chartlet-line-thin.chartlet-line-dotted{stroke-dasharray:1 3}#chartlet-57786d15e36bb90f .chartlet-line-bold{stroke-width:4.5}#chartlet-57786d15e36bb90f.chartlet-multiples .chartlet-line-bold{stroke-width:3}</style><line x1="94.04" y1="40" x2="94.04" y2="384" class="chartlet-grid"/><text x="94.04" y="30" text-anchor="middle" class="chartlet-label">2024</text><line x1="545.96" y1="40" x2="545.96" y2="384" class="chartlet-grid"/><text x="545.96" y="30" text-anchor="middle" class="chartlet-label">2025</text><polyline data-series="0" points="94.04,195.6 545.96,89" class="chartlet-line chartlet-line-series-1"/><circle data-series="0" cx="94.04" cy="195.6" r="4" class="chartlet-point chartlet-point-series-1"><title>North, 2024: 42</title></circle><circle data-series="0" cx="545.96" cy="89" r="4" class="chartlet-point chartlet-point-series-1"><title>North, 2025: 55</title></circle><polyline data-series="1" points="94.04,228.4 545.96,244.8" class="chartlet-line chartlet-line-series-2 chartlet-line-dashed"/><circle data-series="1" cx="94.04" cy="228.4" r="4" class="chartlet-point chartlet-point-series-2"><title>South, 2024: 38</title></circle><circle data-series="1" cx="545.96" cy="244.8" r="4" class="chartlet-point chartlet-point-series-2"><title>South, 2025: 36</title></circle><polyline data-series="2" points="94.04,121.8 545.96,138.2" class="chartlet-line chartlet-line-series-3 chartlet-line-dotted"/><circle data-series="2" cx="94.04" cy="121.8" r="4" class="chartlet-point chartlet-point-series-3"><title>East, 2024: 51</title></circle><circle data-series="2" cx="545.96" cy="138.2" r="4" class="chartlet-point chartlet-point-series-3"><title>East, 2025: 49</title></circle><polyline data-series="3" points="94.04,302.2 545.96,203.8" class="chartlet-line chartlet-line-series-4 chartlet-line-thin"/><circle data-series="3" cx="94.04" cy="302.2" r="4" class="chartlet-point chartlet-point-series-4"><title>West, 2024: 29</title></circle><circle data-series="3" cx="545.96" cy="203.8" r="4" class="chartlet-point chartlet-point-series-4"><title>West, 2025: 41</title></circle><text x="84.04" y="199.6" text-anchor="end" class="chartlet-label">North  42</text><text x="84.04" y="232.4" text-anchor="end" class="chartlet-label">South  38</text><text x="84.04" y="125.8" text-anchor="end" class="chartlet-label">East  51</text><text x="84.04" y="306.2" text-anchor="end" class="chartlet-label">West  29</text><text x="555.96" y="93" text-anchor="start" class="chartlet-label">55  North</text><text x="555.96" y="248.8" text-anchor="start" class="chartlet-label">36  South</text><text x="555.96" y="142.2" text-anchor="start" class="chartlet-label">49  East</text><text x="555.96" y="207.8" text-anchor="start" class="chartlet-label">41  West</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="440" viewBox="0 0 380 440" id="chartlet-57786d15e36bb90f-m" role="img" aria-labelledby="chartlet-57786d15e36bb90f-m-title chartlet-57786d15e36bb90f-m-description" class="chartlet-root"><title id="chartlet-57786d15e36bb90f-m-title">Revenue by region, 2024 and 2025</title><desc id="chartlet-57786d15e36bb90f-m-description">Slope chart of 4 series from 2024 to 2025: North 42 → 55 (+13); South 38 → 36 (−2); East 51 → 49 (−2); West 29 → 41 (+12). Largest rise: North (+13). Largest fall: South (−2).</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-57786d15e36bb90f-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-57786d15e36bb90f-m .chartlet-label,#chartlet-57786d15e36bb90f-m .chartlet-tick,#chartlet-57786d15e36bb90f-m .chartlet-value,#chartlet-57786d15e36bb90f-m .chartlet-value-inverse,#chartlet-57786d15e36bb90f-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-57786d15e36bb90f-m .chartlet-value,#chartlet-57786d15e36bb90f-m .chartlet-value-inverse{font-weight:600}#chartlet-57786d15e36bb90f-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-57786d15e36bb90f-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-57786d15e36bb90f-m .chartlet-axis-title{font-weight:600}#chartlet-57786d15e36bb90f-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-57786d15e36bb90f-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-57786d15e36bb90f-m .chartlet-bar,#chartlet-57786d15e36bb90f-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-57786d15e36bb90f-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-57786d15e36bb90f-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-57786d15e36bb90f-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-57786d15e36bb90f-m .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f-m .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f-m .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f-m .chartlet-series-4{fill:var(--chartlet-color-4)}.chartlet-wrapper{display:inline-block;max-width:100%}.chartlet-filter{border:none;padding:0;margin:0 0 12px 0}.chartlet-filter legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-filter label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-filter input{margin-right:4px}.chartlet-filter input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-filter input.series-0:not(:checked)) .chartlet-root [data-series="0"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-1:not(:checked)) .chartlet-root [data-series="1"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-2:not(:checked)) .chartlet-root [data-series="2"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-3:not(:checked)) .chartlet-root [data-series="3"]{display:none}#chartlet-57786d15e36bb90f-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-57786d15e36bb90f-m .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f-m .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f-m .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f-m .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-57786d15e36bb90f-m .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f-m .chartlet-hit{fill:transparent;stroke:none}#chartlet-57786d15e36bb90f-m .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-57786d15e36bb90f-m .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-57786d15e36bb90f-m .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f-m .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f-m .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-57786d15e36bb90f-m .chartlet-hatch{stroke:none}#chartlet-57786d15e36bb90f-m .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-57786d15e36bb90f-m .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-57786d15e36bb90f-m .chartlet-line-thin{stroke-width:1}#chartlet-57786d15e36bb90f-m .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-57786d15e36bb90f-m .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-57786d15e36bb90f-m .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-57786d15e36bb90f-m .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-57786d15e36bb90f-m .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}#chartlet-57786d15e36bb90f-m .chartlet-area{stroke:none;fill-opacity:.18}#chartlet-57786d15e36bb90f-m .chartlet-line-dashed{stroke-dasharray:7 5}#chartlet-57786d15e36bb90f-m .chartlet-line-dotted{stroke-dasharray:0 7}#chartlet-57786d15e36bb90f-m .chartlet-line-thin.chartlet-line-dotted{stroke-dasharray:1 3}#chartlet-57786d15e36bb90f-m .chartlet-line-bold{stroke-width:4.5}#chartlet-57786d15e36bb90f-m.chartlet-multiples .chartlet-line-bold{stroke-width:3}#chartlet-57786d15e36bb90f-m .chartlet-title-small{font-size:18px}</style><line x1="82.04" y1="40" x2="82.04" y2="424" class="chartlet-grid"/><text x="82.04" y="30" text-anchor="middle" class="chartlet-label">2024</text><line x1="297.96" y1="40" x2="297.96" y2="424" class="chartlet-grid"/><text x="297.96" y="30" text-anchor="middle" class="chartlet-label">2025</text><polyline data-series="0" points="82.04,213.6 297.96,94" class="chartlet-line chartlet-line-series-1"/><circle data-series="0" cx="82.04" cy="213.6" r="4" class="chartlet-point chartlet-point-series-1"><title>North, 2024: 42</title></circle><circle data-series="0" cx="297.96" cy="94" r="4" class="chartlet-point chartlet-point-series-1"><title>North, 2025: 55</title></circle><polyline data-series="1" points="82.04,250.4 297.96,268.8" class="chartlet-line chartlet-line-series-2 chartlet-line-dashed"/><circle data-series="1" cx="82.04" cy="250.4" r="4" class="chartlet-point chartlet-point-series-2"><title>South, 2024: 38</title></circle><circle data-series="1" cx="297.96" cy="268.8" r="4" class="chartlet-point chartlet-point-series-2"><title>South, 2025: 36</title></circle><polyline data-series="2" points="82.04,130.8 297.96,149.2" class="chartlet-line chartlet-line-series-3 chartlet-line-dotted"/><circle data-series="2" cx="82.04" cy="130.8" r="4" class="chartlet-point chartlet-point-series-3"><title>East, 2024: 51</title></circle><circle data-series="2" cx="297.96" cy="149.2" r="4" class="chartlet-point chartlet-point-series-3"><title>East, 2025: 49</title></circle><polyline data-series="3" points="82.04,333.2 297.96,222.8" class="chartlet-line chartlet-line-series-4 chartlet-line-thin"/><circle data-series="3" cx="82.04" cy="333.2" r="4" class="chartlet-point chartlet-point-series-4"><title>West, 2024: 29</title></circle><circle data-series="3" cx="297.96" cy="222.8" r="4" class="chartlet-point chartlet-point-series-4"><title>West, 2025: 41</title></circle><text x="72.04" y="217.6" text-anchor="end" class="chartlet-label">North  42</text><text x="72.04" y="254.4" text-anchor="end" class="chartlet-label">South  38</text><text x="72.04" y="134.8" text-anchor="end" class="chartlet-label">East  51</text><text x="72.04" y="337.2" text-anchor="end" class="chartlet-label">West  29</text><text x="307.96" y="98" text-anchor="start" class="chartlet-label">55  North</text><text x="307.96" y="272.8" text-anchor="start" class="chartlet-label">36  South</text><text x="307.96" y="153.2" text-anchor="start" class="chartlet-label">49  East</text><text x="307.96" y="226.8" text-anchor="start" class="chartlet-label">41  West</text></svg></div><p class="chartlet-source">Source: Illustrative figures, millions of euros</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Revenue by region, 2024 and 2025</caption><thead><tr><th scope="col">Category</th><th scope="col">North</th><th scope="col">South</th><th scope="col">East</th><th scope="col">West</th></tr></thead><tbody><tr><th scope="row">2024</th><td>42</td><td>38</td><td>51</td><td>29</td></tr><tr><th scope="row">2025</th><td>55</td><td>36</td><td>49</td><td>41</td></tr></tbody></table></details></figure></div>