How it Works

Create bar graphs with two simple classes.

A lightly colored background provides scale. Text labels can go inside or outside of the bar. Use percentages to set the width for fluid bar graphs.

<div class="graph">
    <div class="graph-bar" style="width: 90%;">
        Label in Bar
    </div>
</div>

<div class="graph">
    <div class="graph-bar" style="width: 20%;"></div>
    Label Outside of Bar
</div>

Stacked Bars

If you want, you can display stacked bar. Just make sure the combined widths don't exceed 100%.

<div class="graph">
    <div class="graph-bar" style="width: 30%;">
        Bar 1
    </div>
    <div class="graph-bar graph-bar-alt" style="width: 50%;">
        Bar 2
    </div>
</div>

Browser Support

Bar Graph works in all modern browsers, and IE 6 and above.