manual chart bar html div and svg

use DIV
bar-div

<!doctype html>
<html>
<head>
<title>Manual div bars</title>
</head>
<body>

<div style="height: 10px;" class='bar'></div>
<div style="height: 30px;" class='bar'></div>
<div style="height: 50px;" class='bar'></div>
<div style="height: 90px;" class='bar'></div>

<style>
div.bar{
display: inline-block;
width:30px;
background-color:seagreen;
}
div.bar:hover{
background-color:Crimson;
}
</style>
</body>
</html>

use SVG
bar-svg


<!doctype html>
<html>
<head>
<title>Manual svg bars</title>
</head>
<body>

<svg width='500' height='250'>
<rect width="30" height="10" x="0" y="90"/>
<rect width="30" height="30" x="31" y="70"/>
<rect width="30" height="50" x="62" y="50"/>
<rect width="30" height="90" x="93" y="10"/>
</svg>

<style>
rect {
fill:seagreen;
}
rect:hover {
fill:Crimson;
}
</style>
</body>
</html>

Published by

G3n1k

just to remember what i had known :)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s