DEV Community

Cover image for Charts in CSS

Charts in CSS

Mads Stoumann on June 09, 2025

Charts have been done in CSS many times before — there's even a dedicated project. So why this post? Because CSS evolves all the time — new, cool t...
Collapse
 
dotallio profile image
Dotallio

Really cool how you’re taking advantage of the latest CSS features for charts, especially keeping things accessible and responsive. Which chart type do you find most challenging to get just right in practice?

Collapse
 
madsstoumann profile image
Mads Stoumann

Thank you! The charts themselves were not tricky, but I would have liked to be able to use CSS to get the previous values in the area/line charts!

Collapse
 
artydev profile image
artydev

The GOAT :-)

Collapse
 
madsstoumann profile image
Mads Stoumann • Edited

Thank you! 🐐

Collapse
 
chovy profile image
chovy

this is awesome but can you do a realtime candlestick chart?

Collapse
 
madsstoumann profile image
Mads Stoumann
Collapse
 
adilbo profile image
adilbo

Very nice! Is there a way to get the values into the Pie and Donut Graph?

Collapse
 
madsstoumann profile image
Mads Stoumann

For these you need the accumulated and total, as mentioned in the article. I’ll publish a web component soon, so you just feed it with JSON.

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

There is a <pie-chart> Web Component: pie-meister.github.io/

Thread Thread
 
madsstoumann profile image
Mads Stoumann • Edited

I’ll make <data-chart>, where you can set a type-attribute to either: area, bar, column, donut, line or pie