CSS-only bar charts are one of those things we've tackled a bunch of times in different ways. But how can modern CSS features finally make it not only trivial, but fun?

CSS-Tricks is a go-to destination for web designers and front-end developers seeking insights into CSS techniques, web design trends, and best practices. Through a rich collection of articles, tutorials, and code snippets, CSS-Tricks equips developers with the knowledge and tools needed to create visually stunning and user-friendly websites. Whether you're looking to master CSS layout techniques, explore responsive design principles, or stay updated with the latest CSS features and browser compatibility issues, CSS-Tricks offers practical guidance and inspiration for elevating your web design skills.

CSS-Tricks

Modern CSS features like sibling-index() and an upgraded attr() function enable simpler bar chart creation. By using CSS Grid with 100 rows and these new functions, you can build charts where sibling-index() automatically places bars in consecutive columns, while attr() reads data-value attributes to determine bar heights. The technique works for vertical bars, horizontal bars, and marker-based charts, eliminating the need for manual CSS variables or complex hacks that were previously required.

CSS Bar Charts Using Modern Functions