Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Dynamic bar chart

CSS magic for survey summaries



7:42 pm on Jan 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Lurking here for several months has given me the courage to try to create dynamic bar charts with CSS. These bars show the percentage that each response was chosen for a given question: i.e., for question #1, response A got 42%, response B got 17%, etc.

I've got the bars created using the CSS as follows:

.chart {width:18%; background:#EEE; border:solid 1px #555;}
.bar {background:#AAF; float:left; color:#FFF;}

The dynamic bar is created thusly:

<span class="chart">
<span class="bar" style="width:X%></span>

where X is a computed percentage. This gives a proportional solid bar inside the containing "100%" box.

My issue is that I would like to also include the "X%" text smack dab in middle of the "chart" span, regardless of the length of the bar. So far I've only been able to get it centered in the middle of the bar (which makes 11% and 22% look the same length since the span expands to the length of the content (it's a short bar)), or in the middle of the remaining white space of the chart span.

I'll attempt an illustration of what I'm looking for:

======== 25%

Pretend the "25%" & "75%" are in the center and the final bar in the middle is all the way to the right

I've tried sticking the X% in its own <span>, but still couldn't get it to work. My attempts with positioning and z-index only succeeded in forcing the chart to expand to two lines, with the bar on one line and the X% on the other.

Thanks for your help.


7:51 pm on Jan 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

You will need two spans inside the chart for each bar and use positioning to overlay the two, one being 100% wide with the text centered and the other being the coloured bar.

That should work.


8:12 pm on Jan 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


Thans for the quick reply.

I've tried that. I've attempted

<span class="chart">
<span class="pct">X%</span>
<span class="bar" style="width:X%"></span>

with the additional CSS for pct:

.pct {color:#888; width:100%;}

Adding "text-align:center" to the .chart class, centers the percentage, but the bar either starts after the percentage (without the "float:left"), or pops down to a second line (with the "float:left"). I've tried relative and absolute positioning for both with no luck.

An aside: am I correct in presuming that position:absolute positions relative to the containing block element, but not the containing inline element?

Floating and positioning is still a little bit of a mystery to me, so I'm sure I'm missing something.


11:11 pm on Jan 17, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I don't mess with this much but here is the snippet on position:

Value: absolute ¦ relative ¦ static
Initial: static
Applies to: all elements
Inherited: no
Percentage values: N/A

Each variety of 'position' establishes one or more of the following:

A new rectangular overlay, outside of the document flow, into which the element's contents are flowed (absolute)
A box positioning context (absolute) or a Cartesian positioning context (relative) for absolutely positioned child elements
A new clipping region for child elements (absolute)
A position either within the current positioning context (absolute) or relative to the normally rendered position (relative)
A z-order relative to the current positioning context (absolute, relative)
'Absolute' Positioned elements act like block-level elements from a CSS1 formatting perspective. However, since they fall completely outside of the normal document flow, the following CSS1 properties do not apply: 'float', 'clear', 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', 'margin'.

that's what you need to change to get them to overlap, but I'm not sure off hand what it needs to be, you may have to use different values for the top and left attributes as well...


12:34 am on Jan 19, 2003 (gmt 0)

10+ Year Member

don't use span - use div thus:

<div class="chart">
<div class="bar" style="width:x%"></div>

with this added to your definitions:
chart { position:relative;}
bar { position:absolute; top:0px; left:0px; height:20px;}


4:19 pm on Jan 20, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member


Thanks for your reply. I can't use a div because I need an inline element--the chart's on the same line with the actual count and the text of the response.

However, I did add the "position:relative" to the chart class, and that has appeared to do what I want it to do! I had tried combinations of position:absolute and position:relative to the child spans (.bar and .pct) but not to the parent span (.chart).

I'm not sure why that makes a difference (and I welcome any explanation thereof) but I'm happy it works.

Thanks again to you and Gibble for your help.

For those keeping score at home, here is the final (subject to possible tweaking) CSS:

.chart {position:relative; width:18%; background:#EEE; border:solid 1px #555;}
.bar {position:absolute; left:0px; background:#AAF; color:#FFF;}
.pct {position:relative; width:100%; text-align:center; color:#F00;}

Featured Threads

Hot Threads This Week

Hot Threads This Month