chartlet 0.15.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-3dbfde720275ab2a" role="img" aria-labelledby="chartlet-3dbfde720275ab2a-title chartlet-3dbfde720275ab2a-description" class="chartlet-root"><title id="chartlet-3dbfde720275ab2a-title">Electricity generation by source</title><desc id="chartlet-3dbfde720275ab2a-description">Time chart with 7 points from 2000 to 2024 and 4 series (Fossil, Nuclear, Hydro and other, Wind and solar). Highest: 1,520 (Fossil in 2004). Lowest: 25 (Wind and solar in 2000). Stacked areas, from the bottom up: Fossil, Nuclear, Hydro and other, Wind and solar; the top edge shows their total.</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-3dbfde720275ab2a .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-3dbfde720275ab2a .chartlet-label,#chartlet-3dbfde720275ab2a .chartlet-tick,#chartlet-3dbfde720275ab2a .chartlet-value,#chartlet-3dbfde720275ab2a .chartlet-value-inverse,#chartlet-3dbfde720275ab2a .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-3dbfde720275ab2a .chartlet-value,#chartlet-3dbfde720275ab2a .chartlet-value-inverse{font-weight:600}#chartlet-3dbfde720275ab2a .chartlet-value{fill:var(--chartlet-text)}#chartlet-3dbfde720275ab2a .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-3dbfde720275ab2a .chartlet-axis-title{font-weight:600}#chartlet-3dbfde720275ab2a .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-3dbfde720275ab2a .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-3dbfde720275ab2a .chartlet-bar,#chartlet-3dbfde720275ab2a .chartlet-point{fill:var(--chartlet-accent)}#chartlet-3dbfde720275ab2a .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-3dbfde720275ab2a .chartlet-background{fill:var(--chartlet-background)}#chartlet-3dbfde720275ab2a .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-3dbfde720275ab2a .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-3dbfde720275ab2a .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-3dbfde720275ab2a .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-3dbfde720275ab2a .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-3dbfde720275ab2a .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-3dbfde720275ab2a .chartlet-hit{fill:transparent;stroke:none}#chartlet-3dbfde720275ab2a .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-3dbfde720275ab2a .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-3dbfde720275ab2a .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-3dbfde720275ab2a .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-3dbfde720275ab2a .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-3dbfde720275ab2a .chartlet-hatch{stroke:none}#chartlet-3dbfde720275ab2a .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-3dbfde720275ab2a .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-3dbfde720275ab2a .chartlet-line-thin{stroke-width:1}#chartlet-3dbfde720275ab2a .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-3dbfde720275ab2a .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-3dbfde720275ab2a .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-3dbfde720275ab2a .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-3dbfde720275ab2a .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-3dbfde720275ab2a .chartlet-area{stroke:none;fill-opacity:.18}#chartlet-3dbfde720275ab2a .chartlet-line-dashed{stroke-dasharray:7 5}#chartlet-3dbfde720275ab2a .chartlet-line-dotted{stroke-dasharray:0 7}#chartlet-3dbfde720275ab2a .chartlet-line-thin.chartlet-line-dotted{stroke-dasharray:1 3}#chartlet-3dbfde720275ab2a .chartlet-line-bold{stroke-width:4.5}#chartlet-3dbfde720275ab2a.chartlet-multiples .chartlet-line-bold{stroke-width:3}</style><line x1="54.918" y1="414" x2="671.64" y2="414" class="chartlet-zero"/><text x="44.918" y="418" text-anchor="end" class="chartlet-tick">0</text><line x1="54.918" y1="287.333" x2="671.64" y2="287.333" class="chartlet-grid"/><text x="44.918" y="291.333" text-anchor="end" class="chartlet-tick">1,000</text><line x1="54.918" y1="160.667" x2="671.64" y2="160.667" class="chartlet-grid"/><text x="44.918" y="164.667" text-anchor="end" class="chartlet-tick">2,000</text><line x1="54.918" y1="34" x2="671.64" y2="34" class="chartlet-grid"/><text x="44.918" y="38" text-anchor="end" class="chartlet-tick">3,000</text><line x1="60.918" y1="34" x2="60.918" y2="414" class="chartlet-grid"/><text x="60.918" y="438" text-anchor="middle" class="chartlet-tick">2000</text><line x1="186.954" y1="34" x2="186.954" y2="414" class="chartlet-grid"/><text x="186.954" y="438" text-anchor="middle" class="chartlet-tick">2005</text><line x1="312.92" y1="34" x2="312.92" y2="414" class="chartlet-grid"/><text x="312.92" y="438" text-anchor="middle" class="chartlet-tick">2010</text><line x1="438.887" y1="34" x2="438.887" y2="414" class="chartlet-grid"/><text x="438.887" y="438" text-anchor="middle" class="chartlet-tick">2015</text><line x1="564.853" y1="34" x2="564.853" y2="414" class="chartlet-grid"/><text x="564.853" y="438" text-anchor="middle" class="chartlet-tick">2020</text><text x="54.918" y="14" text-anchor="start" class="chartlet-axis-title">TWh per year</text><polyline points="60.918,230.333 161.705,221.467 262.492,224 363.279,243 464.066,255.667 564.853,287.333 665.64,312.667 665.64,414 564.853,414 464.066,414 363.279,414 262.492,414 161.705,414 60.918,414" class="chartlet-area chartlet-band-series-1"/><polyline points="60.918,121.4 161.705,107.467 262.492,113.8 363.279,141.667 464.066,156.867 564.853,199.933 665.64,234.133 665.64,312.667 564.853,287.333 464.066,255.667 363.279,243 262.492,224 161.705,221.467 60.918,230.333" class="chartlet-area chartlet-band-series-2"/><polyline points="60.918,70.733 161.705,56.8 262.492,60.6 363.279,84.667 464.066,97.333 564.853,136.6 665.64,173.333 665.64,234.133 564.853,199.933 464.066,156.867 363.279,141.667 262.492,113.8 161.705,107.467 60.918,121.4" class="chartlet-area chartlet-band-series-3"/><polyline points="60.918,67.567 161.705,48.567 262.492,44.133 363.279,47.933 464.066,44.133 564.853,65.667 665.64,77.067 665.64,173.333 564.853,136.6 464.066,97.333 363.279,84.667 262.492,60.6 161.705,56.8 60.918,70.733" class="chartlet-area chartlet-band-series-4"/><polyline points="60.918,230.333 161.705,221.467 262.492,224 363.279,243 464.066,255.667 564.853,287.333 665.64,312.667" class="chartlet-line chartlet-line-series-1"/><circle cx="60.918" cy="230.333" r="4" class="chartlet-point chartlet-point-series-1"><title>2000 – Fossil: 1,450</title></circle><circle cx="161.705" cy="221.467" r="4" class="chartlet-point chartlet-point-series-1"><title>2004 – Fossil: 1,520</title></circle><circle cx="262.492" cy="224" r="4" class="chartlet-point chartlet-point-series-1"><title>2008 – Fossil: 1,500</title></circle><circle cx="363.279" cy="243" r="4" class="chartlet-point chartlet-point-series-1"><title>2012 – Fossil: 1,350</title></circle><circle cx="464.066" cy="255.667" r="4" class="chartlet-point chartlet-point-series-1"><title>2016 – Fossil: 1,250</title></circle><circle cx="564.853" cy="287.333" r="4" class="chartlet-point chartlet-point-series-1"><title>2020 – Fossil: 1,000</title></circle><circle cx="665.64" cy="312.667" r="4" class="chartlet-point chartlet-point-series-1"><title>2024 – Fossil: 800</title></circle><polyline points="60.918,121.4 161.705,107.467 262.492,113.8 363.279,141.667 464.066,156.867 564.853,199.933 665.64,234.133" class="chartlet-line chartlet-line-series-2"/><circle cx="60.918" cy="121.4" r="4" class="chartlet-point chartlet-point-series-2"><title>2000 – Nuclear: 860</title></circle><circle cx="161.705" cy="107.467" r="4" class="chartlet-point chartlet-point-series-2"><title>2004 – Nuclear: 900</title></circle><circle cx="262.492" cy="113.8" r="4" class="chartlet-point chartlet-point-series-2"><title>2008 – Nuclear: 870</title></circle><circle cx="363.279" cy="141.667" r="4" class="chartlet-point chartlet-point-series-2"><title>2012 – Nuclear: 800</title></circle><circle cx="464.066" cy="156.867" r="4" class="chartlet-point chartlet-point-series-2"><title>2016 – Nuclear: 780</title></circle><circle cx="564.853" cy="199.933" r="4" class="chartlet-point chartlet-point-series-2"><title>2020 – Nuclear: 690</title></circle><circle cx="665.64" cy="234.133" r="4" class="chartlet-point chartlet-point-series-2"><title>2024 – Nuclear: 620</title></circle><polyline points="60.918,70.733 161.705,56.8 262.492,60.6 363.279,84.667 464.066,97.333 564.853,136.6 665.64,173.333" class="chartlet-line chartlet-line-series-3"/><circle cx="60.918" cy="70.733" r="4" class="chartlet-point chartlet-point-series-3"><title>2000 – Hydro and other: 400</title></circle><circle cx="161.705" cy="56.8" r="4" class="chartlet-point chartlet-point-series-3"><title>2004 – Hydro and other: 400</title></circle><circle cx="262.492" cy="60.6" r="4" class="chartlet-point chartlet-point-series-3"><title>2008 – Hydro and other: 420</title></circle><circle cx="363.279" cy="84.667" r="4" class="chartlet-point chartlet-point-series-3"><title>2012 – Hydro and other: 450</title></circle><circle cx="464.066" cy="97.333" r="4" class="chartlet-point chartlet-point-series-3"><title>2016 – Hydro and other: 470</title></circle><circle cx="564.853" cy="136.6" r="4" class="chartlet-point chartlet-point-series-3"><title>2020 – Hydro and other: 500</title></circle><circle cx="665.64" cy="173.333" r="4" class="chartlet-point chartlet-point-series-3"><title>2024 – Hydro and other: 480</title></circle><polyline points="60.918,67.567 161.705,48.567 262.492,44.133 363.279,47.933 464.066,44.133 564.853,65.667 665.64,77.067" class="chartlet-line chartlet-line-series-4"/><circle cx="60.918" cy="67.567" r="4" class="chartlet-point chartlet-point-series-4"><title>2000 – Wind and solar: 25</title></circle><circle cx="161.705" cy="48.567" r="4" class="chartlet-point chartlet-point-series-4"><title>2004 – Wind and solar: 65</title></circle><circle cx="262.492" cy="44.133" r="4" class="chartlet-point chartlet-point-series-4"><title>2008 – Wind and solar: 130</title></circle><circle cx="363.279" cy="47.933" r="4" class="chartlet-point chartlet-point-series-4"><title>2012 – Wind and solar: 290</title></circle><circle cx="464.066" cy="44.133" r="4" class="chartlet-point chartlet-point-series-4"><title>2016 – Wind and solar: 420</title></circle><circle cx="564.853" cy="65.667" r="4" class="chartlet-point chartlet-point-series-4"><title>2020 – Wind and solar: 560</title></circle><circle cx="665.64" cy="77.067" r="4" class="chartlet-point chartlet-point-series-4"><title>2024 – Wind and solar: 760</title></circle><text x="679.64" y="81.067" text-anchor="start" class="chartlet-legend">Wind and solar</text><text x="679.64" y="177.333" text-anchor="start" class="chartlet-legend">Hydro and other</text><text x="679.64" y="238.133" text-anchor="start" class="chartlet-legend">Nuclear</text><text x="679.64" y="316.667" text-anchor="start" class="chartlet-legend">Fossil</text></svg><p class="chartlet-source">Source: Sample data, rounded</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">Time</th><th scope="col">Fossil</th><th scope="col">Nuclear</th><th scope="col">Hydro and other</th><th scope="col">Wind and solar</th></tr></thead><tbody><tr><th scope="row">2000</th><td>1,450</td><td>860</td><td>400</td><td>25</td></tr><tr><th scope="row">2004</th><td>1,520</td><td>900</td><td>400</td><td>65</td></tr><tr><th scope="row">2008</th><td>1,500</td><td>870</td><td>420</td><td>130</td></tr><tr><th scope="row">2012</th><td>1,350</td><td>800</td><td>450</td><td>290</td></tr><tr><th scope="row">2016</th><td>1,250</td><td>780</td><td>470</td><td>420</td></tr><tr><th scope="row">2020</th><td>1,000</td><td>690</td><td>500</td><td>560</td></tr><tr><th scope="row">2024</th><td>800</td><td>620</td><td>480</td><td>760</td></tr></tbody></table></details></figure>