Skip navigation

CSS Bar Graphs and Charts

Examples of CSS Bar Charts by Lorelle VanFossenApples to Oranges has info on making bar graphs and charts with CSS, a technique I experimented with ages ago in my popular series of CSS Experiments in the experiments with creating Backgrounds, Bar Charts, and Graphs with CSS techniques.

The technique isn’t very difficult. The background of a container is set to repeat for the width or length of that container. For example, to create a stripe effect using this graphic of two colors next to each other Two tone graphic used as a background image for the CSS bar graph effect, we would just set the background to that graphic:

<div style="background:URL(2tone.gif) repeat"></div>

Depending upon the height and the width of the container, the graphic would then repeat and fill the space creating a stripe effect as shown below.

<div style="background:URL(2tone.gif) repeat; height: 10px; width: 100px"></div>

Examples of CSS Bar Chart technique using repeating gradient graphic as a background by Lorelle VanFossen

Unfortunately, it doesn’t work so easily that way. Since the container is empty, we need to “fill” it with a non-visual space or nothing will appear since there is nothing to “stretch” the container. Unfortunately, if we used an HTML character entity as the filler like the ampersand ( ^amp;), the container for the background image takes on the characteristics of what the space would normally look like in a sentence, reflecting the font-size, leading and kerning. We need to find another space filler instead of a character code in order to specifically control the size of the container.

To represent the filler space of the empty container, you can use HTML comments in place of the “space” such as

<div style="background: URL(something.gif) repeat"><!--comment --></div>

This eliminates the leading and kerning restrictions and the container would then reflect only the sizes set by the height and width such as

<div style=" height: 50px; width: 10px; background: URL(something.gif) repeat"><!--comment --></div>.

Floating more than one container with the repeating patterns inside next to one another creates the chart effect. It can create not only interesting bar charts and graphs but also fun backgrounds with stripes and patterns. You can use solid colors or graphics which repeat. This creates novel backgrounds with alternating colors or you can use the effect to create an interesting graphic that moves the content around in a stair step look.

To create space around several different sized repeating background graphics or colors, you need to add margins and/or padding to make each element appear in its own column or row.

<div style=" height: 50px; width: 10px; padding: 5px; background: URL(something.gif) repeat"><!--comment --></div>.

The space between the repeating graphic elements is controlled by the space around the graphic within the graphic image. For example, I used repeating graphics of a blue globe-like balls to create a chart representative of travel statistics. The single graphic image used has ample white space around the globe to give the illusion of spacing between the visual representation of the histogram numbers. The same technique can work for boats, cats, dogs, fish, or whatever small graphic you would like to use to represent the subjects of the chart.

Examples of CSS Bar Charts using graphic images by Lorelle VanFossen

Examples of CSS Bar Chart technique using repeating gradient graphic as a background by Lorelle VanFossenAnother example I created used a long thin graphic of a green color that fades off to white, which creates a faded gradient. Repeated horizontally or vertically to create a box, it looks like the color is fading into nothing against a white background. You can also use one color fading in a gradient to another color, not just white.

This technique is really effective for backgrounds in boxes, sidebars, columns, and overall backgrounds. The actual size of the background image is tiny. In the example of the green fading background shown, the graphic is only 809 bytes compared to a static graphic as the fixed background image which might be 25,000 bytes. Using the repeating background graphic, I can have the content or the width (or height) vary and the background will continue to fill in, no matter what the size of the container, creating a versatile background pattern that stretches with the layout.

You can find more similar designs and experiments from my CSS Experiments like these experiments with CSS Backgrounds, Bar Charts, and Graphs. and also more explanations and examples from Web Page Design for Designers: Drawing with CSS. Experiment with these yourself and see what fun designs and charts you can create.


Site Search Tags: , , , , ,
Copyright Lorelle VanFossen

One Comment

  1. Posted September 7, 2008 at 10:00 am | Permalink

    딸국질은 횡경막의 경련에 의해서 일어 나는 것으로 쇼크를

    준다거나 잠시 호흡을 멈추면 낫는다.

    하지만 경우에 따라정신적 부담감으로 빨리 멎지 않을 때가 있다.

    멈추게 하는제일 좋은 방법은 심호흡을 한 뒤 견딜 수 있는데까지

    숨을 쉬지 않는 것이다.

    또는 숨을 멈춘채 찬물을 조금씩 마셔도효과가 있다.

    그래도 가라 앉지 않으면 조용히 숨을 내쉬면

    서 아랫배를 들이밀거나 때때로 배에 힘을 가득 준 뒤 호흡

    을 멈추는 복식호흡도 좋다.

    출처:http://cafe.daum.net/lifebean


20 Trackbacks/Pingbacks

  1. [...] CSS Bar Graphs and Charts [...]

  2. [...] so I’ve read the existing articles about building bar graphs with CSS. All are great work. But they didn’t exist before I needed [...]

  3. [...] FooPlot – online graphing calculator and plotter. Flowchart – free to create charts online. CSS Bar Graphs and Charts http://www.ejschart.com/ – powerful Javascript chart, commerical only. http://www.amcharts.com/ – [...]

  4. [...] http://lorelle.wordpress.com/2006/01/05/css-bar-graphs-and-charts/ [...]

  5. [...] CSS Bar Graphs and Charts [...]

  6. [...] CSS Bar Graphs and Charts [...]

  7. [...] came across this post – Comment on CSS Bar Graphs and Charts by <b>karaoke</b> » Comment on CSS <b>&#8230… – and thought it was worth sharing. I hope you find it interesting too and take the time to read [...]

  8. [...] here Filed under: [...]

  9. [...] CSS Bar Graphs and Charts [...]

  10. [...] CSS Bar Graphs and Charts [...]

  11. [...] – online graphing calculator and plotter. Flowchart – free to create charts online. CSS Bar Graphs and Charts Ejschart – powerful Javascript chart, commerical only. Amcharts – free version will [...]

  12. [...] CSS Bar Graphs and Charts [...]

  13. [...] CSS Bar Graphs and Charts [...]

  14. [...] CSS Bar Graphs and Charts [...]

  15. […] CSS Bar Graphs and Charts […]

  16. […] CSS Bar Graphs and Charts […]

  17. […] CSS Bar Graphs and Charts […]

  18. […] few people recently linked to the article I wrote on CSS Bar Graphs and Charts, a method that allows creation of bar charts and graphs using only CSS, which was featured in […]

  19. […] CSS Bar Graphs and Charts […]

  20. […] CSS Bar Graphs and Charts […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 20,269 other followers

%d bloggers like this: