0

Is there a way that I can turn bootstrap progress bars sideways to use them as a column chart? I'm thinking about going to Google graphs, but it's easier to work with bootstrap. Here's some code to get past the StackOverflow quality standards.

Code goes here.
Phillip Senn
  • 46,771
  • 90
  • 257
  • 373

1 Answers1

3

This is a workaround. It's not so good but it's very short and it works.

Usage: it's very similar to the usual progress bar, but there are two differences:

  1. You should set the bar height, not width
  2. Progress bar height is fixed (but it could be changed with inline style)

CSS:

.progress-vertical {
    width: 20px;
    height: 100px !important;
    position: relative;
}
.progress-vertical .bar {
    width: 100% !important;
    position: absolute;
    bottom: 0;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

Example: http://jsfiddle.net/mQzj9/251/

Edit 1: Fixed wrong example link.

Edit 2: Thanks to Pavlo Mykhalov, the jQuery code is not needed anymore (CSS updated)

Edit 3: CSS link outdated, updated.

Ryan
  • 14,682
  • 32
  • 106
  • 179
Francesco Frassinelli
  • 3,145
  • 2
  • 31
  • 43
  • Try [`position:absolute` technic](http://stackoverflow.com/questions/311990/how-do-i-get-a-div-to-float-to-the-bottom-of-its-container) instead of using JavaScript. – Pavlo Sep 08 '12 at 22:06
  • @PavloMykhalov Thanks, but I've already tried, but I can't get it working. Your link is funny because the accepted answer contains "this appears to be impossible" :) If you know how to do it, please improve my code. – Francesco Frassinelli Sep 08 '12 at 22:13
  • 2
    I've updated [the fiddle](http://jsfiddle.net/mQzj9/4/). Now you have to rearrange the gradient from left to right. – Pavlo Sep 08 '12 at 22:34
  • Thank you very much Francesco and PavloMykhalov! – Phillip Senn Sep 08 '12 at 22:55