Simple CSS chart for dynamic content

This is an example of a very simple CSS + one tiny image chart. The result will look like this: Insert the follwoing style into the head of your html (or add it to your existing CSS): <style> .container{ width:300px; font-family: Arial; } .record{ float: left; width: 100%; border: 1px solid #ccc; background-color: #f0f0f0; margin-bottom: […]

From our weekly sponsor: Design every part of your website with the brand new Divi Theme Builder. Try it for free.

This is an example of a very simple CSS + one tiny image chart. The result will look like this:

Simple CSS chart
Simple CSS chart

Insert the follwoing style into the head of your html (or add it to your existing CSS):

<style>

.container{
 width:300px;
 font-family: Arial;
 }

.record{
 float: left;
 width: 100%;
 border: 1px solid #ccc;
 background-color: #f0f0f0;
 margin-bottom: 2px;
 -moz-border-radius: 0px 10px 10px 0px;
 -moz-border-radius: 0px 10px 10px 0px;
 }

.bar {
 background: transparent url(gradient.png) repeat-x top left;
 float: left;
 clear: left;
 height: 30px;
 }

.bar span{
 font-size: 12px;
 font-weight: bold;
 color: #fff;
 float: left;
 margin-left: 5px;
 margin-top: 7px;
 }

.p{
 padding-top: 3px;
 float: right;
 color: #6D8591;
 clear: right;
 font-size: 12px;
 font-weight: bold;
 height: 25px;
 }

.p span{
 font-size: 12px;
 font-weight: bold;
 float: left;
 margin-right: 5px;
 margin-top: 5px;
 }

</style>

First, we create a container  that will hold all the chart with its records. The width of that can be adapted to your needs as we will define the width of each record as a percentage. You can use this very nicely if you have some kind of dynamic content:

<div class="container">
 <div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
 <div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
 <div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
 <div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>

The image of the gradient is the following:

Gradient image
Gradient image

Unfortunately, the rounded borders don’t work in IE, but anyway, it also looks nice without 🙂

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 5

Comments are closed.
  1. Pingback: Simple css chart for dynamic content

  2. -webkit-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;

  3. When one of charts goes to 90% or above, it breaks in half.

    solution: add some css

    .record
    { …
    position: relative;
    .. }
    .p

    {…
    position: absolute;
    right: 0;
    …}