HTML/CSS - SVG Bar Graph Example [html css] Online Editor and JavaScript Compiler

html

<!-- Created by Ehab Samir-->
<!DOCTYPE html>
<html>
    <head>
        <title>SVG Bar Graph Example</title>
    </head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300">
   
  <line class="Axis" x1="10" y1="180" x2="360" y2="180"/>
  <line class="Axis" x1="10" y1="181" x2="10" y2="5"/>
  <line class="Gridlines" x1="10" y1="140" x2="360" y2="140"/>
  <line class="Gridlines" x1="10" y1="100" x2="360" y2="100"/>
  <line class="Gridlines" x1="10" y1="60" x2="360" y2="60"/>
  <line class="Gridlines" x1="10" y1="20" x2="360" y2="20"/>
  <rect class="BarArea" x="20" y="113" width="20" height="67"/>
  <rect class="BarPop" x="45" y="28" width="20" height="152"/>
  <rect class="BarArea" x="90" y="37" width="20" height="143"/>
  <rect class="BarPop" x="115" y="128" width="20" height="52"/>
  <rect class="BarArea" x="160" y="21" width="20" height="159"/>
  <rect class="BarPop" x="185" y="115" width="20" height="65"/>
  <rect class="BarArea" x="230" y="169" width="20" height="11"/>
  <rect class="BarPop" x="255" y="162" width="20" height="18"/>
  <rect class="BarArea" x="300" y="174" width="20" height="6"/>
  <rect class="BarPop" x="325" y="165" width="20" height="15"/>

css

/* Created by Ehab Samir*/
.Axis {
        stroke:  #333;
        stroke-width: 2;
      }
      .Gridlines {
        stroke:  #ddd;
        stroke-width: 1;
      }
      .Title {
        text-anchor: middle;
        font-size: 14px;
        fill:  #444
      }
     .BarArea {
        fill:  #7bf;
        opacity: 0.5;
      }
      .BarArea:hover {
        fill:  #59d;
        opacity: 0.8;
      }
      .BarPop {
        fill:  #fb7;
        opacity: 0.5;
      }
      .BarPop:hover {

BROWSER

Console