Create Dynamic Charts In Pure CSS3

Graphs are used to represent table content/ data graphically. You can use pie charts, line charts, bar charts, etc. It makes it easier to understand the presented content if we represent it using a graph.

Now you can use CSS3 to make beautiful graphical charts, the advantage of using CSS3 graphs is they are lightweight and take less bandwidth to download on the client-side. In addition to that, you can also easily change the values in the table and it would reflect in your graph.

This article brings you some very useful websites offering pure CSS graphs and charts.

This is a simple dynamic chart in CSS, download gradian and gradient location use CSS and HTML to implement this chart in your code.

Table of Contents

1 Pure CSS chart for dynamic content
2 Pure CSS 3D Bar Graph
3 Animated 3D bar graph in CSS3
4 pure Css3 3d animated Bar Chart
5 CSS3 round bar graph
6 Line graph animation in CSS3
7 CSS3 graph based on table data
8 CSS3 pie and pyramid chart
9 3D bar chart in pure CSS3

Pure CSS chart for dynamic content

.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;
 }

<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>