chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Indicators of growth since 1900</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="520" viewBox="0 0 800 520" id="chartlet-bfdf195c10301b6f" role="img" aria-labelledby="chartlet-bfdf195c10301b6f-title chartlet-bfdf195c10301b6f-description" class="chartlet-root chartlet-multiples"><title id="chartlet-bfdf195c10301b6f-title">Indicators of growth since 1900</title><desc id="chartlet-bfdf195c10301b6f-description">Time chart in 4 panels (Population (millions), Primary energy (PWh), Water withdrawal (km³), Fertilizer use (Mt)) with a value axis of their own, each from 1900 to 2025.</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-bfdf195c10301b6f .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-bfdf195c10301b6f .chartlet-label,#chartlet-bfdf195c10301b6f .chartlet-tick,#chartlet-bfdf195c10301b6f .chartlet-value,#chartlet-bfdf195c10301b6f .chartlet-value-inverse,#chartlet-bfdf195c10301b6f .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-bfdf195c10301b6f .chartlet-value,#chartlet-bfdf195c10301b6f .chartlet-value-inverse{font-weight:600}#chartlet-bfdf195c10301b6f .chartlet-value{fill:var(--chartlet-text)}#chartlet-bfdf195c10301b6f .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-bfdf195c10301b6f .chartlet-axis-title{font-weight:600}#chartlet-bfdf195c10301b6f .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-bfdf195c10301b6f .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-bfdf195c10301b6f .chartlet-bar,#chartlet-bfdf195c10301b6f .chartlet-point{fill:var(--chartlet-accent)}#chartlet-bfdf195c10301b6f .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-bfdf195c10301b6f .chartlet-background{fill:var(--chartlet-background)}#chartlet-bfdf195c10301b6f .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-bfdf195c10301b6f .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-bfdf195c10301b6f .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-bfdf195c10301b6f .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-bfdf195c10301b6f .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-bfdf195c10301b6f .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-bfdf195c10301b6f .chartlet-hit{fill:transparent;stroke:none}#chartlet-bfdf195c10301b6f .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-bfdf195c10301b6f .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-bfdf195c10301b6f .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-bfdf195c10301b6f .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-bfdf195c10301b6f .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-bfdf195c10301b6f .chartlet-hatch{stroke:none}#chartlet-bfdf195c10301b6f .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-bfdf195c10301b6f .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-bfdf195c10301b6f .chartlet-line-thin{stroke-width:1}#chartlet-bfdf195c10301b6f .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-bfdf195c10301b6f .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-bfdf195c10301b6f .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-bfdf195c10301b6f .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-bfdf195c10301b6f .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-bfdf195c10301b6f.chartlet-multiples .chartlet-line{stroke-width:2}#chartlet-bfdf195c10301b6f .chartlet-panel-title{font-size:13px;font-weight:650;fill:var(--chartlet-text)}</style><text x="68.806" y="28" text-anchor="start" class="chartlet-panel-title">Population (millions)</text><line x1="68.806" y1="231" x2="388" y2="231" class="chartlet-zero"/><text x="58.806" y="235" text-anchor="end" class="chartlet-tick">0</text><line x1="68.806" y1="192.8" x2="388" y2="192.8" class="chartlet-grid"/><text x="58.806" y="196.8" text-anchor="end" class="chartlet-tick">2,000</text><line x1="68.806" y1="154.6" x2="388" y2="154.6" class="chartlet-grid"/><text x="58.806" y="158.6" text-anchor="end" class="chartlet-tick">4,000</text><line x1="68.806" y1="116.4" x2="388" y2="116.4" class="chartlet-grid"/><text x="58.806" y="120.4" text-anchor="end" class="chartlet-tick">6,000</text><line x1="68.806" y1="78.2" x2="388" y2="78.2" class="chartlet-grid"/><text x="58.806" y="82.2" text-anchor="end" class="chartlet-tick">8,000</text><line x1="68.806" y1="40" x2="388" y2="40" class="chartlet-grid"/><text x="58.806" y="44" text-anchor="end" class="chartlet-tick">10,000</text><line x1="74.806" y1="40" x2="74.806" y2="231" class="chartlet-grid"/><text x="74.806" y="255" text-anchor="middle" class="chartlet-tick">1900</text><line x1="197.681" y1="40" x2="197.681" y2="231" class="chartlet-grid"/><text x="197.681" y="255" text-anchor="middle" class="chartlet-tick">1950</text><line x1="320.556" y1="40" x2="320.556" y2="231" class="chartlet-grid"/><text x="320.556" y="255" text-anchor="middle" class="chartlet-tick">2000</text><polyline points="74.806,199.485 136.244,192.8 197.681,183.25 259.119,153.454 320.556,113.535 382,76.29" class="chartlet-line chartlet-line-series-1"/><circle cx="74.806" cy="199.485" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1900 – Population (millions) · Value: 1,650</title></circle><circle cx="136.244" cy="192.8" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1925 – Population (millions) · Value: 2,000</title></circle><circle cx="197.681" cy="183.25" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1950 – Population (millions) · Value: 2,500</title></circle><circle cx="259.119" cy="153.454" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1975 – Population (millions) · Value: 4,060</title></circle><circle cx="320.556" cy="113.535" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2000 – Population (millions) · Value: 6,150</title></circle><circle cx="382" cy="76.29" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2025 – Population (millions) · Value: 8,100</title></circle><text x="452.806" y="28" text-anchor="start" class="chartlet-panel-title">Primary energy (PWh)</text><line x1="452.806" y1="231" x2="772" y2="231" class="chartlet-zero"/><text x="442.806" y="235" text-anchor="end" class="chartlet-tick">0</text><line x1="452.806" y1="183.25" x2="772" y2="183.25" class="chartlet-grid"/><text x="442.806" y="187.25" text-anchor="end" class="chartlet-tick">50</text><line x1="452.806" y1="135.5" x2="772" y2="135.5" class="chartlet-grid"/><text x="442.806" y="139.5" text-anchor="end" class="chartlet-tick">100</text><line x1="452.806" y1="87.75" x2="772" y2="87.75" class="chartlet-grid"/><text x="442.806" y="91.75" text-anchor="end" class="chartlet-tick">150</text><line x1="452.806" y1="40" x2="772" y2="40" class="chartlet-grid"/><text x="442.806" y="44" text-anchor="end" class="chartlet-tick">200</text><line x1="458.806" y1="40" x2="458.806" y2="231" class="chartlet-grid"/><text x="458.806" y="255" text-anchor="middle" class="chartlet-tick">1900</text><line x1="581.681" y1="40" x2="581.681" y2="231" class="chartlet-grid"/><text x="581.681" y="255" text-anchor="middle" class="chartlet-tick">1950</text><line x1="704.556" y1="40" x2="704.556" y2="231" class="chartlet-grid"/><text x="704.556" y="255" text-anchor="middle" class="chartlet-tick">2000</text><polyline points="458.806,219.54 520.244,211.9 581.681,204.26 643.119,159.375 704.556,119.265 766,59.1" class="chartlet-line chartlet-line-series-1"/><circle cx="458.806" cy="219.54" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1900 – Primary energy (PWh) · Value: 12</title></circle><circle cx="520.244" cy="211.9" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1925 – Primary energy (PWh) · Value: 20</title></circle><circle cx="581.681" cy="204.26" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1950 – Primary energy (PWh) · Value: 28</title></circle><circle cx="643.119" cy="159.375" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1975 – Primary energy (PWh) · Value: 75</title></circle><circle cx="704.556" cy="119.265" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2000 – Primary energy (PWh) · Value: 117</title></circle><circle cx="766" cy="59.1" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2025 – Primary energy (PWh) · Value: 180</title></circle><text x="68.806" y="277" text-anchor="start" class="chartlet-panel-title">Water withdrawal (km³)</text><line x1="68.806" y1="480" x2="388" y2="480" class="chartlet-zero"/><text x="58.806" y="484" text-anchor="end" class="chartlet-tick">0</text><line x1="68.806" y1="441.8" x2="388" y2="441.8" class="chartlet-grid"/><text x="58.806" y="445.8" text-anchor="end" class="chartlet-tick">1,000</text><line x1="68.806" y1="403.6" x2="388" y2="403.6" class="chartlet-grid"/><text x="58.806" y="407.6" text-anchor="end" class="chartlet-tick">2,000</text><line x1="68.806" y1="365.4" x2="388" y2="365.4" class="chartlet-grid"/><text x="58.806" y="369.4" text-anchor="end" class="chartlet-tick">3,000</text><line x1="68.806" y1="327.2" x2="388" y2="327.2" class="chartlet-grid"/><text x="58.806" y="331.2" text-anchor="end" class="chartlet-tick">4,000</text><line x1="68.806" y1="289" x2="388" y2="289" class="chartlet-grid"/><text x="58.806" y="293" text-anchor="end" class="chartlet-tick">5,000</text><line x1="74.806" y1="289" x2="74.806" y2="480" class="chartlet-grid"/><text x="74.806" y="504" text-anchor="middle" class="chartlet-tick">1900</text><line x1="197.681" y1="289" x2="197.681" y2="480" class="chartlet-grid"/><text x="197.681" y="504" text-anchor="middle" class="chartlet-tick">1950</text><line x1="320.556" y1="289" x2="320.556" y2="480" class="chartlet-grid"/><text x="320.556" y="504" text-anchor="middle" class="chartlet-tick">2000</text><polyline points="74.806,457.844 136.244,449.44 197.681,430.34 259.119,380.68 320.556,338.66 382,323.38" class="chartlet-line chartlet-line-series-1"/><circle cx="74.806" cy="457.844" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1900 – Water withdrawal (km³) · Value: 580</title></circle><circle cx="136.244" cy="449.44" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1925 – Water withdrawal (km³) · Value: 800</title></circle><circle cx="197.681" cy="430.34" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1950 – Water withdrawal (km³) · Value: 1,300</title></circle><circle cx="259.119" cy="380.68" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1975 – Water withdrawal (km³) · Value: 2,600</title></circle><circle cx="320.556" cy="338.66" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2000 – Water withdrawal (km³) · Value: 3,700</title></circle><circle cx="382" cy="323.38" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2025 – Water withdrawal (km³) · Value: 4,100</title></circle><text x="452.806" y="277" text-anchor="start" class="chartlet-panel-title">Fertilizer use (Mt)</text><line x1="452.806" y1="480" x2="772" y2="480" class="chartlet-zero"/><text x="442.806" y="484" text-anchor="end" class="chartlet-tick">0</text><line x1="452.806" y1="432.25" x2="772" y2="432.25" class="chartlet-grid"/><text x="442.806" y="436.25" text-anchor="end" class="chartlet-tick">50</text><line x1="452.806" y1="384.5" x2="772" y2="384.5" class="chartlet-grid"/><text x="442.806" y="388.5" text-anchor="end" class="chartlet-tick">100</text><line x1="452.806" y1="336.75" x2="772" y2="336.75" class="chartlet-grid"/><text x="442.806" y="340.75" text-anchor="end" class="chartlet-tick">150</text><line x1="452.806" y1="289" x2="772" y2="289" class="chartlet-grid"/><text x="442.806" y="293" text-anchor="end" class="chartlet-tick">200</text><line x1="458.806" y1="289" x2="458.806" y2="480" class="chartlet-grid"/><text x="458.806" y="504" text-anchor="middle" class="chartlet-tick">1900</text><line x1="581.681" y1="289" x2="581.681" y2="480" class="chartlet-grid"/><text x="581.681" y="504" text-anchor="middle" class="chartlet-tick">1950</text><line x1="704.556" y1="289" x2="704.556" y2="480" class="chartlet-grid"/><text x="704.556" y="504" text-anchor="middle" class="chartlet-tick">2000</text><polyline points="458.806,479.045 520.244,477.135 581.681,466.63 643.119,389.275 704.556,351.075 766,298.55" class="chartlet-line chartlet-line-series-1"/><circle cx="458.806" cy="479.045" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1900 – Fertilizer use (Mt) · Value: 1</title></circle><circle cx="520.244" cy="477.135" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1925 – Fertilizer use (Mt) · Value: 3</title></circle><circle cx="581.681" cy="466.63" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1950 – Fertilizer use (Mt) · Value: 14</title></circle><circle cx="643.119" cy="389.275" r="2.5" class="chartlet-point chartlet-point-series-1"><title>1975 – Fertilizer use (Mt) · Value: 95</title></circle><circle cx="704.556" cy="351.075" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2000 – Fertilizer use (Mt) · Value: 135</title></circle><circle cx="766" cy="298.55" r="2.5" class="chartlet-point chartlet-point-series-1"><title>2025 – Fertilizer use (Mt) · Value: 190</title></circle></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 Indicators of growth since 1900</caption><thead><tr><th scope="col">Time</th><th scope="col">Population (millions) · Value</th><th scope="col">Primary energy (PWh) · Value</th><th scope="col">Water withdrawal (km³) · Value</th><th scope="col">Fertilizer use (Mt) · Value</th></tr></thead><tbody><tr><th scope="row">1900</th><td>1,650</td><td>12</td><td>580</td><td>1</td></tr><tr><th scope="row">1925</th><td>2,000</td><td>20</td><td>800</td><td>3</td></tr><tr><th scope="row">1950</th><td>2,500</td><td>28</td><td>1,300</td><td>14</td></tr><tr><th scope="row">1975</th><td>4,060</td><td>75</td><td>2,600</td><td>95</td></tr><tr><th scope="row">2000</th><td>6,150</td><td>117</td><td>3,700</td><td>135</td></tr><tr><th scope="row">2025</th><td>8,100</td><td>180</td><td>4,100</td><td>190</td></tr></tbody></table></details></figure>