chartlet 0.14.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><figure class="chartlet-figure" data-viz="chart"><figcaption>Where the electricity came from</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="760" height="380" viewBox="0 0 760 380" id="chartlet-90f55a91d4e04bd2" role="img" aria-labelledby="chartlet-90f55a91d4e04bd2-title chartlet-90f55a91d4e04bd2-description" class="chartlet-root"><title id="chartlet-90f55a91d4e04bd2-title">Where the electricity came from</title><desc id="chartlet-90f55a91d4e04bd2-description">Waffle chart of 100 squares, each standing for 1. Parts, as value (share, squares): Wind 31 (31.0%, 31); Solar 12 (12.0%, 12); Gas 28 (28.0%, 28); Coal 17 (17.0%, 17); Rest 12 (12.0%, 12).</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-90f55a91d4e04bd2 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-90f55a91d4e04bd2 .chartlet-label,#chartlet-90f55a91d4e04bd2 .chartlet-tick,#chartlet-90f55a91d4e04bd2 .chartlet-value,#chartlet-90f55a91d4e04bd2 .chartlet-value-inverse,#chartlet-90f55a91d4e04bd2 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-90f55a91d4e04bd2 .chartlet-value,#chartlet-90f55a91d4e04bd2 .chartlet-value-inverse{font-weight:600}#chartlet-90f55a91d4e04bd2 .chartlet-value{fill:var(--chartlet-text)}#chartlet-90f55a91d4e04bd2 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-90f55a91d4e04bd2 .chartlet-axis-title{font-weight:600}#chartlet-90f55a91d4e04bd2 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-90f55a91d4e04bd2 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-90f55a91d4e04bd2 .chartlet-bar,#chartlet-90f55a91d4e04bd2 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-90f55a91d4e04bd2 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-90f55a91d4e04bd2 .chartlet-background{fill:var(--chartlet-background)}#chartlet-90f55a91d4e04bd2 .chartlet-waffle-1{fill:var(--chartlet-color-1)}#chartlet-90f55a91d4e04bd2 .chartlet-waffle-2{fill:var(--chartlet-color-2)}#chartlet-90f55a91d4e04bd2 .chartlet-waffle-3{fill:var(--chartlet-color-3)}#chartlet-90f55a91d4e04bd2 .chartlet-waffle-4{fill:var(--chartlet-color-4)}#chartlet-90f55a91d4e04bd2 .chartlet-waffle-rest{fill:var(--chartlet-grid)}#chartlet-90f55a91d4e04bd2 .chartlet-waffle-cell{stroke:none;rx:2px}#chartlet-90f55a91d4e04bd2 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}</style><rect x="24" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="56" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="88" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="120" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="152" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="184" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="216" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="248" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="280" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="312" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="24" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="56" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="88" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="120" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="152" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="184" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="216" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="248" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="280" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="312" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="24" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="56" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="88" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="120" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="152" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="184" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="216" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="248" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="280" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="312" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="24" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="56" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="88" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="120" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="152" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="184" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="216" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="248" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="280" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="312" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="24" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="56" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="88" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="120" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="152" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="184" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="216" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="248" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="280" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="312" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="24" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="56" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="88" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="120" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="152" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="184" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="216" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="248" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="280" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="312" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="24" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="56" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="88" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="120" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="152" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="184" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="216" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="248" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="280" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="312" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="24" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="56" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="88" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="120" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="152" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="184" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="216" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="248" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="280" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="312" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="24" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="56" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="88" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="120" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="152" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="184" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="216" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="248" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="280" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="312" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="24" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="56" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="88" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="120" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="152" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="184" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="216" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="248" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="280" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="312" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="432" y="12" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-1"/><text x="452" y="22.5" text-anchor="start" class="chartlet-legend">Wind – 31 (31.0%)</text><rect x="432" y="34" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-2"/><text x="452" y="44.5" text-anchor="start" class="chartlet-legend">Solar – 12 (12.0%)</text><rect x="432" y="56" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-3"/><text x="452" y="66.5" text-anchor="start" class="chartlet-legend">Gas – 28 (28.0%)</text><rect x="432" y="78" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-4"/><text x="452" y="88.5" text-anchor="start" class="chartlet-legend">Coal – 17 (17.0%)</text><rect x="432" y="100" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-rest"/><text x="452" y="110.5" text-anchor="start" class="chartlet-legend">Rest – 12 (12.0%)</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="520" viewBox="0 0 380 520" id="chartlet-90f55a91d4e04bd2-m" role="img" aria-labelledby="chartlet-90f55a91d4e04bd2-m-title chartlet-90f55a91d4e04bd2-m-description" class="chartlet-root"><title id="chartlet-90f55a91d4e04bd2-m-title">Where the electricity came from</title><desc id="chartlet-90f55a91d4e04bd2-m-description">Waffle chart of 100 squares, each standing for 1. Parts, as value (share, squares): Wind 31 (31.0%, 31); Solar 12 (12.0%, 12); Gas 28 (28.0%, 28); Coal 17 (17.0%, 17); Rest 12 (12.0%, 12).</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-90f55a91d4e04bd2-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-90f55a91d4e04bd2-m .chartlet-label,#chartlet-90f55a91d4e04bd2-m .chartlet-tick,#chartlet-90f55a91d4e04bd2-m .chartlet-value,#chartlet-90f55a91d4e04bd2-m .chartlet-value-inverse,#chartlet-90f55a91d4e04bd2-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-90f55a91d4e04bd2-m .chartlet-value,#chartlet-90f55a91d4e04bd2-m .chartlet-value-inverse{font-weight:600}#chartlet-90f55a91d4e04bd2-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-90f55a91d4e04bd2-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-90f55a91d4e04bd2-m .chartlet-axis-title{font-weight:600}#chartlet-90f55a91d4e04bd2-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-90f55a91d4e04bd2-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-90f55a91d4e04bd2-m .chartlet-bar,#chartlet-90f55a91d4e04bd2-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-90f55a91d4e04bd2-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-90f55a91d4e04bd2-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-90f55a91d4e04bd2-m .chartlet-waffle-1{fill:var(--chartlet-color-1)}#chartlet-90f55a91d4e04bd2-m .chartlet-waffle-2{fill:var(--chartlet-color-2)}#chartlet-90f55a91d4e04bd2-m .chartlet-waffle-3{fill:var(--chartlet-color-3)}#chartlet-90f55a91d4e04bd2-m .chartlet-waffle-4{fill:var(--chartlet-color-4)}#chartlet-90f55a91d4e04bd2-m .chartlet-waffle-rest{fill:var(--chartlet-grid)}#chartlet-90f55a91d4e04bd2-m .chartlet-waffle-cell{stroke:none;rx:2px}#chartlet-90f55a91d4e04bd2-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-90f55a91d4e04bd2-m .chartlet-title-small{font-size:18px}</style><rect x="12" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="44" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="76" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="108" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="140" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="172" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="204" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="236" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="268" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="300" y="12" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="12" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="44" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="76" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="108" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="140" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="172" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="204" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="236" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="268" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="300" y="44" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="12" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="44" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="76" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="108" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="140" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="172" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="204" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="236" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="268" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="300" y="76" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="12" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-1"><title>Wind: 31 (31.0%)</title></rect><rect x="44" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="76" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="108" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="140" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="172" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="204" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="236" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="268" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="300" y="108" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="12" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="44" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="76" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-2"><title>Solar: 12 (12.0%)</title></rect><rect x="108" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="140" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="172" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="204" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="236" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="268" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="300" y="140" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="12" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="44" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="76" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="108" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="140" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="172" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="204" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="236" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="268" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="300" y="172" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="12" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="44" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="76" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="108" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="140" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="172" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="204" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="236" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="268" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="300" y="204" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="12" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-3"><title>Gas: 28 (28.0%)</title></rect><rect x="44" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="76" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="108" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="140" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="172" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="204" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="236" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="268" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="300" y="236" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="12" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="44" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="76" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="108" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="140" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="172" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="204" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="236" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-4"><title>Coal: 17 (17.0%)</title></rect><rect x="268" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="300" y="268" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="12" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="44" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="76" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="108" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="140" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="172" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="204" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="236" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="268" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="300" y="300" width="30" height="30" class="chartlet-waffle-cell chartlet-waffle-rest"><title>Rest: 12 (12.0%)</title></rect><rect x="12" y="348" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-1"/><text x="32" y="358.5" text-anchor="start" class="chartlet-legend">Wind – 31 (31.0%)</text><rect x="12" y="370" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-2"/><text x="32" y="380.5" text-anchor="start" class="chartlet-legend">Solar – 12 (12.0%)</text><rect x="12" y="392" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-3"/><text x="32" y="402.5" text-anchor="start" class="chartlet-legend">Gas – 28 (28.0%)</text><rect x="12" y="414" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-4"/><text x="32" y="424.5" text-anchor="start" class="chartlet-legend">Coal – 17 (17.0%)</text><rect x="12" y="436" width="12" height="12" class="chartlet-waffle-cell chartlet-waffle-rest"/><text x="32" y="446.5" text-anchor="start" class="chartlet-legend">Rest – 12 (12.0%)</text></svg></div><p class="chartlet-source">Source: Illustrative shares of one year</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Where the electricity came from</caption><thead><tr><th scope="col">Part</th><th scope="col">Value</th><th scope="col">Share</th><th scope="col">Squares</th></tr></thead><tbody><tr><th scope="row">Wind</th><td>31</td><td>31.0%</td><td>31</td></tr><tr><th scope="row">Solar</th><td>12</td><td>12.0%</td><td>12</td></tr><tr><th scope="row">Gas</th><td>28</td><td>28.0%</td><td>28</td></tr><tr><th scope="row">Coal</th><td>17</td><td>17.0%</td><td>17</td></tr><tr><th scope="row">Rest</th><td>12</td><td>12.0%</td><td>12</td></tr></tbody></table></details></figure></div>