chartlet 0.10.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Electricity generation by source</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-f608ca9b12f35340" role="img" aria-labelledby="chartlet-f608ca9b12f35340-title chartlet-f608ca9b12f35340-description" class="chartlet-root"><title id="chartlet-f608ca9b12f35340-title">Electricity generation by source</title><desc id="chartlet-f608ca9b12f35340-description">Bar chart with 5 categories and 4 series (Wind, Solar, Gas, Coal). Highest: 181 (Coal in 2022). Lowest: 46 (Solar in 2019). The series are stacked. Highest total: 445 (2022). Lowest total: 407 (2023).</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-f608ca9b12f35340 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-f608ca9b12f35340 .chartlet-label,#chartlet-f608ca9b12f35340 .chartlet-tick,#chartlet-f608ca9b12f35340 .chartlet-value,#chartlet-f608ca9b12f35340 .chartlet-value-inverse,#chartlet-f608ca9b12f35340 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-f608ca9b12f35340 .chartlet-value,#chartlet-f608ca9b12f35340 .chartlet-value-inverse{font-weight:600}#chartlet-f608ca9b12f35340 .chartlet-value{fill:var(--chartlet-text)}#chartlet-f608ca9b12f35340 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-f608ca9b12f35340 .chartlet-axis-title{font-weight:600}#chartlet-f608ca9b12f35340 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-f608ca9b12f35340 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-f608ca9b12f35340 .chartlet-bar,#chartlet-f608ca9b12f35340 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-f608ca9b12f35340 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-f608ca9b12f35340 .chartlet-background{fill:var(--chartlet-background)}#chartlet-f608ca9b12f35340 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-f608ca9b12f35340 .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-f608ca9b12f35340 .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-f608ca9b12f35340 .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-f608ca9b12f35340 .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}</style><line x1="72" y1="388" x2="776" y2="388" class="chartlet-zero"/><text x="62" y="392" text-anchor="end" class="chartlet-tick">0</text><line x1="72" y1="322" x2="776" y2="322" class="chartlet-grid"/><text x="62" y="326" text-anchor="end" class="chartlet-tick">100</text><line x1="72" y1="256" x2="776" y2="256" class="chartlet-grid"/><text x="62" y="260" text-anchor="end" class="chartlet-tick">200</text><line x1="72" y1="190" x2="776" y2="190" class="chartlet-grid"/><text x="62" y="194" text-anchor="end" class="chartlet-tick">300</text><line x1="72" y1="124" x2="776" y2="124" class="chartlet-grid"/><text x="62" y="128" text-anchor="end" class="chartlet-tick">400</text><line x1="72" y1="58" x2="776" y2="58" class="chartlet-grid"/><text x="62" y="62" text-anchor="end" class="chartlet-tick">500</text><text x="72" y="38" text-anchor="start" class="chartlet-axis-title">TWh</text><rect x="72" y="2" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="88" y="11" text-anchor="start" class="chartlet-legend">Wind</text><rect x="135.84" y="2" width="10" height="10" class="chartlet-bar chartlet-series-2"/><text x="151.84" y="11" text-anchor="start" class="chartlet-legend">Solar</text><rect x="203.64" y="2" width="10" height="10" class="chartlet-bar chartlet-series-3"/><text x="219.64" y="11" text-anchor="start" class="chartlet-legend">Gas</text><rect x="261.12" y="2" width="10" height="10" class="chartlet-bar chartlet-series-4"/><text x="277.12" y="11" text-anchor="start" class="chartlet-legend">Coal</text><rect x="97.344" y="304.84" width="90.112" height="83.16" class="chartlet-bar chartlet-series-1"><title>2019 – Wind: 126</title></rect><text x="142.4" y="350.42" text-anchor="middle" class="chartlet-value-inverse">126</text><rect x="97.344" y="274.48" width="90.112" height="30.36" class="chartlet-bar chartlet-series-2"><title>2019 – Solar: 46</title></rect><text x="142.4" y="293.66" text-anchor="middle" class="chartlet-value-inverse">46</text><rect x="97.344" y="215.08" width="90.112" height="59.4" class="chartlet-bar chartlet-series-3"><title>2019 – Gas: 90</title></rect><text x="142.4" y="248.78" text-anchor="middle" class="chartlet-value-inverse">90</text><rect x="97.344" y="102.22" width="90.112" height="112.86" class="chartlet-bar chartlet-series-4"><title>2019 – Coal: 171</title></rect><text x="142.4" y="162.65" text-anchor="middle" class="chartlet-value-inverse">171</text><text x="142.4" y="94.22" text-anchor="middle" class="chartlet-value">433</text><text x="142.4" y="412" text-anchor="middle" class="chartlet-label">2019</text><rect x="238.144" y="300.88" width="90.112" height="87.12" class="chartlet-bar chartlet-series-1"><title>2020 – Wind: 132</title></rect><text x="283.2" y="348.44" text-anchor="middle" class="chartlet-value-inverse">132</text><rect x="238.144" y="267.88" width="90.112" height="33" class="chartlet-bar chartlet-series-2"><title>2020 – Solar: 50</title></rect><text x="283.2" y="288.38" text-anchor="middle" class="chartlet-value-inverse">50</text><rect x="238.144" y="205.18" width="90.112" height="62.7" class="chartlet-bar chartlet-series-3"><title>2020 – Gas: 95</title></rect><text x="283.2" y="240.53" text-anchor="middle" class="chartlet-value-inverse">95</text><rect x="238.144" y="116.74" width="90.112" height="88.44" class="chartlet-bar chartlet-series-4"><title>2020 – Coal: 134</title></rect><text x="283.2" y="164.96" text-anchor="middle" class="chartlet-value-inverse">134</text><text x="283.2" y="108.74" text-anchor="middle" class="chartlet-value">411</text><text x="283.2" y="412" text-anchor="middle" class="chartlet-label">2020</text><rect x="378.944" y="312.76" width="90.112" height="75.24" class="chartlet-bar chartlet-series-1"><title>2021 – Wind: 114</title></rect><text x="424" y="354.38" text-anchor="middle" class="chartlet-value-inverse">114</text><rect x="378.944" y="280.42" width="90.112" height="32.34" class="chartlet-bar chartlet-series-2"><title>2021 – Solar: 49</title></rect><text x="424" y="300.59" text-anchor="middle" class="chartlet-value-inverse">49</text><rect x="378.944" y="221.68" width="90.112" height="58.74" class="chartlet-bar chartlet-series-3"><title>2021 – Gas: 89</title></rect><text x="424" y="255.05" text-anchor="middle" class="chartlet-value-inverse">89</text><rect x="378.944" y="114.1" width="90.112" height="107.58" class="chartlet-bar chartlet-series-4"><title>2021 – Coal: 163</title></rect><text x="424" y="171.89" text-anchor="middle" class="chartlet-value-inverse">163</text><text x="424" y="106.1" text-anchor="middle" class="chartlet-value">415</text><text x="424" y="412" text-anchor="middle" class="chartlet-label">2021</text><rect x="519.744" y="305.5" width="90.112" height="82.5" class="chartlet-bar chartlet-series-1"><title>2022 – Wind: 125</title></rect><text x="564.8" y="350.75" text-anchor="middle" class="chartlet-value-inverse">125</text><rect x="519.744" y="265.9" width="90.112" height="39.6" class="chartlet-bar chartlet-series-2"><title>2022 – Solar: 60</title></rect><text x="564.8" y="289.7" text-anchor="middle" class="chartlet-value-inverse">60</text><rect x="519.744" y="213.76" width="90.112" height="52.14" class="chartlet-bar chartlet-series-3"><title>2022 – Gas: 79</title></rect><text x="564.8" y="243.83" text-anchor="middle" class="chartlet-value-inverse">79</text><rect x="519.744" y="94.3" width="90.112" height="119.46" class="chartlet-bar chartlet-series-4"><title>2022 – Coal: 181</title></rect><text x="564.8" y="158.03" text-anchor="middle" class="chartlet-value-inverse">181</text><text x="564.8" y="86.3" text-anchor="middle" class="chartlet-value">445</text><text x="564.8" y="412" text-anchor="middle" class="chartlet-label">2022</text><rect x="660.544" y="296.26" width="90.112" height="91.74" class="chartlet-bar chartlet-series-1"><title>2023 – Wind: 139</title></rect><text x="705.6" y="346.13" text-anchor="middle" class="chartlet-value-inverse">139</text><rect x="660.544" y="255.34" width="90.112" height="40.92" class="chartlet-bar chartlet-series-2"><title>2023 – Solar: 62</title></rect><text x="705.6" y="279.8" text-anchor="middle" class="chartlet-value-inverse">62</text><rect x="660.544" y="205.18" width="90.112" height="50.16" class="chartlet-bar chartlet-series-3"><title>2023 – Gas: 76</title></rect><text x="705.6" y="234.26" text-anchor="middle" class="chartlet-value-inverse">76</text><rect x="660.544" y="119.38" width="90.112" height="85.8" class="chartlet-bar chartlet-series-4"><title>2023 – Coal: 130</title></rect><text x="705.6" y="166.28" text-anchor="middle" class="chartlet-value-inverse">130</text><text x="705.6" y="111.38" text-anchor="middle" class="chartlet-value">407</text><text x="705.6" y="412" text-anchor="middle" class="chartlet-label">2023</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 Electricity generation by source</caption><thead><tr><th scope="col">Category</th><th scope="col">Wind</th><th scope="col">Solar</th><th scope="col">Gas</th><th scope="col">Coal</th></tr></thead><tbody><tr><th scope="row">2019</th><td>126</td><td>46</td><td>90</td><td>171</td></tr><tr><th scope="row">2020</th><td>132</td><td>50</td><td>95</td><td>134</td></tr><tr><th scope="row">2021</th><td>114</td><td>49</td><td>89</td><td>163</td></tr><tr><th scope="row">2022</th><td>125</td><td>60</td><td>79</td><td>181</td></tr><tr><th scope="row">2023</th><td>139</td><td>62</td><td>76</td><td>130</td></tr></tbody></table></details></figure>