DEV Community

Cover image for Pure CSS BarChart
owieczka
owieczka

Posted on

Pure CSS BarChart

Modern CSS allows for many fantastic stuff like pure css barcharts. We can just define data series in HTML and bunch of css and woula. No needs for any Javascript.

<div class="barchart" style="--scale-x:5;--scale-y:10;">
  <div style="--value: 10;" name="Dogs"></div>
  <div style="--value: 13;" name="Cows"></div>
  <div style="--value: 8;" name="Sheeps"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

BarChart Preview

Details can be examinded in my codepen

Top comments (0)