SVG charts without client-side JavaScript

SVG is just markup, so JSX components can draw charts on the server: a few lines of math turn data into coordinates. The charts are part of the HTML, so they show up instantly, need no chart library in the browser, and work with JavaScript turned off. Tooltips use the SVG <title> element, and the hover effects are plain CSS.

Line chart

Average temperature per month (°C, approximate long-term averages)
-5°0°5°10°15°20°25°30°JanFebMarAprMayJunJulAugSepOctNovDecSydneyMadridBerlinOsloJan Berlin: 0.6° Madrid: 6.3° Oslo: -4.3° Sydney: 23.5°Feb Berlin: 1.4° Madrid: 7.9° Oslo: -4° Sydney: 23.4°Mar Berlin: 4.8° Madrid: 11.2° Oslo: -0.2° Sydney: 22.1°Apr Berlin: 9.3° Madrid: 12.9° Oslo: 4.5° Sydney: 19.5°May Berlin: 14.2° Madrid: 16.7° Oslo: 10.8° Sydney: 16.6°Jun Berlin: 17.5° Madrid: 22.2° Oslo: 15.2° Sydney: 14.2°Jul Berlin: 19.6° Madrid: 25.6° Oslo: 16.4° Sydney: 13.4°Aug Berlin: 19.2° Madrid: 25.1° Oslo: 15.2° Sydney: 14.5°Sep Berlin: 15° Madrid: 20.9° Oslo: 10.8° Sydney: 17°Oct Berlin: 9.9° Madrid: 15.1° Oslo: 6.3° Sydney: 19°Nov Berlin: 5° Madrid: 9.9° Oslo: 0.7° Sydney: 20.4°Dec Berlin: 1.8° Madrid: 6.9° Oslo: -3.1° Sydney: 22.1°
Show data as table
CityJanFebMarAprMayJunJulAugSepOctNovDec
Berlin0.61.44.89.314.217.519.619.2159.951.8
Madrid6.37.911.212.916.722.225.625.120.915.19.96.9
Oslo-4.3-4-0.24.510.815.216.415.210.86.30.7-3.1
Sydney23.523.422.119.516.614.213.414.5171920.422.1

Bar chart

Known moons per planet (as of 2026) · sort by number of moons
0100200300Mercury: 00MercuryVenus: 00VenusEarth: 11EarthMars: 22MarsJupiter: 115115JupiterSaturn: 293293SaturnUranus: 2929UranusNeptune: 1616Neptune

Sparklines

Small charts fit into a table cell. The dots mark the warmest and the coldest month.

CityYearColdestWarmest
Berlin0.6° (Jan)19.6° (Jul)
Madrid6.3° (Jan)25.6° (Jul)
Oslo-4.3° (Jan)16.4° (Jul)
Sydney13.4° (Jul)23.5° (Jan)