Skip to content

Instantly share code, notes, and snippets.

@henriklied

henriklied/Pure CSS Bar Chart

Created October 17, 2009 20:51
Show Gist options
  • Save henriklied/212450 to your computer and use it in GitHub Desktop.
Save henriklied/212450 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pure CSS Bar Chart
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Graph-test</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1000px;
margin: 5em auto;
}
.graph-box {
width: 100%;
height: 300px;
background: white;
}
.point {
position: relative;
width: 10px;
height: 300px;
float: left;
}
.point-2 {
position: absolute;
bottom: 0;
width: 9px;
background: lightblue;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 30px;
}
.point-2 span {
display: none;
}
.point:hover .point-2 {
background: darkblue;
}
.point:hover .point-2 span {
display: block;
position: absolute;
top: -20px ;
font-family: "Helvetica Neue", Helvetica;
font-weight: bolder;
font-size: 9px;
color: #333;
left: 0 ;
}
</style>
</head>
<body>
<div id="wrap">
<div class="graph-box">
<div class="point"><div class="point-2" style="height: 95%"><span>95</span></div></div>
<div class="point"><div class="point-2" style="height: 27%"><span>27</span></div></div>
<div class="point"><div class="point-2" style="height: 63%"><span>63</span></div></div>
<div class="point"><div class="point-2" style="height: 65%"><span>65</span></div></div>
<div class="point"><div class="point-2" style="height: 84%"><span>84</span></div></div>
<div class="point"><div class="point-2" style="height: 47%"><span>47</span></div></div>
<div class="point"><div class="point-2" style="height: 45%"><span>45</span></div></div>
<div class="point"><div class="point-2" style="height: 77%"><span>77</span></div></div>
<div class="point"><div class="point-2" style="height: 11%"><span>11</span></div></div>
<div class="point"><div class="point-2" style="height: 31%"><span>31</span></div></div>
<div class="point"><div class="point-2" style="height: 89%"><span>89</span></div></div>
<div class="point"><div class="point-2" style="height: 11%"><span>11</span></div></div>
<div class="point"><div class="point-2" style="height: 43%"><span>43</span></div></div>
<div class="point"><div class="point-2" style="height: 35%"><span>35</span></div></div>
<div class="point"><div class="point-2" style="height: 99%"><span>99</span></div></div>
<div class="point"><div class="point-2" style="height: 86%"><span>86</span></div></div>
<div class="point"><div class="point-2" style="height: 38%"><span>38</span></div></div>
<div class="point"><div class="point-2" style="height: 42%"><span>42</span></div></div>
<div class="point"><div class="point-2" style="height: 51%"><span>51</span></div></div>
<div class="point"><div class="point-2" style="height: 57%"><span>57</span></div></div>
<div class="point"><div class="point-2" style="height: 63%"><span>63</span></div></div>
<div class="point"><div class="point-2" style="height: 42%"><span>42</span></div></div>
<div class="point"><div class="point-2" style="height: 80%"><span>80</span></div></div>
<div class="point"><div class="point-2" style="height: 37%"><span>37</span></div></div>
<div class="point"><div class="point-2" style="height: 86%"><span>86</span></div></div>
<div class="point"><div class="point-2" style="height: 12%"><span>12</span></div></div>
<div class="point"><div class="point-2" style="height: 14%"><span>14</span></div></div>
<div class="point"><div class="point-2" style="height: 29%"><span>29</span></div></div>
<div class="point"><div class="point-2" style="height: 44%"><span>44</span></div></div>
<div class="point"><div class="point-2" style="height: 43%"><span>43</span></div></div>
<div class="point"><div class="point-2" style="height: 20%"><span>20</span></div></div>
<div class="point"><div class="point-2" style="height: 42%"><span>42</span></div></div>
<div class="point"><div class="point-2" style="height: 89%"><span>89</span></div></div>
<div class="point"><div class="point-2" style="height: 54%"><span>54</span></div></div>
<div class="point"><div class="point-2" style="height: 32%"><span>32</span></div></div>
<div class="point"><div class="point-2" style="height: 57%"><span>57</span></div></div>
<div class="point"><div class="point-2" style="height: 95%"><span>95</span></div></div>
<div class="point"><div class="point-2" style="height: 27%"><span>27</span></div></div>
<div class="point"><div class="point-2" style="height: 34%"><span>34</span></div></div>
<div class="point"><div class="point-2" style="height: 22%"><span>22</span></div></div>
<div class="point"><div class="point-2" style="height: 42%"><span>42</span></div></div>
<div class="point"><div class="point-2" style="height: 34%"><span>34</span></div></div>
<div class="point"><div class="point-2" style="height: 95%"><span>95</span></div></div>
<div class="point"><div class="point-2" style="height: 47%"><span>47</span></div></div>
<div class="point"><div class="point-2" style="height: 19%"><span>19</span></div></div>
<div class="point"><div class="point-2" style="height: 39%"><span>39</span></div></div>
<div class="point"><div class="point-2" style="height: 28%"><span>28</span></div></div>
<div class="point"><div class="point-2" style="height: 12%"><span>12</span></div></div>
<div class="point"><div class="point-2" style="height: 75%"><span>75</span></div></div>
<div class="point"><div class="point-2" style="height: 90%"><span>90</span></div></div>
<div class="point"><div class="point-2" style="height: 48%"><span>48</span></div></div>
<div class="point"><div class="point-2" style="height: 16%"><span>16</span></div></div>
<div class="point"><div class="point-2" style="height: 11%"><span>11</span></div></div>
<div class="point"><div class="point-2" style="height: 3%"><span>3</span></div></div>
<div class="point"><div class="point-2" style="height: 70%"><span>70</span></div></div>
<div class="point"><div class="point-2" style="height: 80%"><span>80</span></div></div>
<div class="point"><div class="point-2" style="height: 84%"><span>84</span></div></div>
<div class="point"><div class="point-2" style="height: 74%"><span>74</span></div></div>
<div class="point"><div class="point-2" style="height: 85%"><span>85</span></div></div>
<div class="point"><div class="point-2" style="height: 76%"><span>76</span></div></div>
<div class="point"><div class="point-2" style="height: 58%"><span>58</span></div></div>
<div class="point"><div class="point-2" style="height: 5%"><span>5</span></div></div>
<div class="point"><div class="point-2" style="height: 39%"><span>39</span></div></div>
<div class="point"><div class="point-2" style="height: 69%"><span>69</span></div></div>
<div class="point"><div class="point-2" style="height: 33%"><span>33</span></div></div>
<div class="point"><div class="point-2" style="height: 74%"><span>74</span></div></div>
<div class="point"><div class="point-2" style="height: 43%"><span>43</span></div></div>
<div class="point"><div class="point-2" style="height: 32%"><span>32</span></div></div>
<div class="point"><div class="point-2" style="height: 62%"><span>62</span></div></div>
<div class="point"><div class="point-2" style="height: 78%"><span>78</span></div></div>
<div class="point"><div class="point-2" style="height: 17%"><span>17</span></div></div>
<div class="point"><div class="point-2" style="height: 86%"><span>86</span></div></div>
<div class="point"><div class="point-2" style="height: 57%"><span>57</span></div></div>
<div class="point"><div class="point-2" style="height: 82%"><span>82</span></div></div>
<div class="point"><div class="point-2" style="height: 37%"><span>37</span></div></div>
<div class="point"><div class="point-2" style="height: 74%"><span>74</span></div></div>
<div class="point"><div class="point-2" style="height: 41%"><span>41</span></div></div>
<div class="point"><div class="point-2" style="height: 45%"><span>45</span></div></div>
<div class="point"><div class="point-2" style="height: 94%"><span>94</span></div></div>
<div class="point"><div class="point-2" style="height: 50%"><span>50</span></div></div>
<div class="point"><div class="point-2" style="height: 81%"><span>81</span></div></div>
<div class="point"><div class="point-2" style="height: 90%"><span>90</span></div></div>
<div class="point"><div class="point-2" style="height: 6%"><span>6</span></div></div>
<div class="point"><div class="point-2" style="height: 82%"><span>82</span></div></div>
<div class="point"><div class="point-2" style="height: 45%"><span>45</span></div></div>
<div class="point"><div class="point-2" style="height: 50%"><span>50</span></div></div>
<div class="point"><div class="point-2" style="height: 15%"><span>15</span></div></div>
<div class="point"><div class="point-2" style="height: 5%"><span>5</span></div></div>
<div class="point"><div class="point-2" style="height: 94%"><span>94</span></div></div>
<div class="point"><div class="point-2" style="height: 76%"><span>76</span></div></div>
<div class="point"><div class="point-2" style="height: 65%"><span>65</span></div></div>
<div class="point"><div class="point-2" style="height: 68%"><span>68</span></div></div>
<div class="point"><div class="point-2" style="height: 4%"><span>4</span></div></div>
<div class="point"><div class="point-2" style="height: 13%"><span>13</span></div></div>
<div class="point"><div class="point-2" style="height: 82%"><span>82</span></div></div>
<div class="point"><div class="point-2" style="height: 75%"><span>75</span></div></div>
<div class="point"><div class="point-2" style="height: 75%"><span>75</span></div></div>
<div class="point"><div class="point-2" style="height: 78%"><span>78</span></div></div>
<div class="point"><div class="point-2" style="height: 76%"><span>76</span></div></div>
<div class="point"><div class="point-2" style="height: 63%"><span>63</span></div></div>
<div style="clear: both;"></div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment