CODEWITHSUNDEEP
csschartsdata-visualization
Zabs
Zabs

Reputation: 14142

Creating negative bar charts using CSS

I've already asked a very similar question but that was using javascript/php - i've not had much luck finding an ideal solution so want try to emulate a chart using just CSS that looks similar to that below

As you can see the chart rows have a secondary element that is overlayed in a different colour & with a black border. This is the style that I am trying to achieve - can anyone suggest how to best go about this?

Can anyone suggest the best way to go about this possibly by creating another chart overlayed on top of another?

negative bar chart

Upvotes: 1

Views: 1116

Answers (2)

Ana
Ana

Reputation: 37179

My attempt at doing the chart with pure CSS http://dabblet.com/gist/3142994

... and a second version with a lot less HTML and cleaner CSS: http://dabblet.com/gist/3143479

Upvotes: 4

Ryan Brodie
Ryan Brodie

Reputation: 6620

Instead of reinventing the wheel, in this case I'd recommend using an existing visualisation API. Google offer a fairly extensive one:

https://developers.google.com/chart/interactive/docs/gallery

If you're feeling adventurous and this isn't what you're after, use float: right; to align the left bars to the right.

Upvotes: -2

Related Questions