I had a task in front of me that required displaying a list of items, where every single item has some data attached to it that should be represented by a bar chart.

The color of the bar should be relative to the value (with an assigned color scheme 0-100, from light green to dark red), each bar should have a border, tooltip that displays value once the user hovers over the bar area and a hover overlay effect. I implemented this solution in Angular.js but as an example, I created this codepen so you can see how to do this without any third-party library such as d3.js. HTML+CSS (LESS)+JS, simple as it can be.

Codepen is embedded on this page but it can also be accessed by this link.

See the Pen CSS bar chart using grids by Marko Letic (@mletic) on CodePen.0