SimpleSVGBarChart

by Simon Raper

HTML

<svg class="chart" width="500" height="500">
    <g class="labels">
        <text transform="translate(110,320) rotate(-90)">A</text>
        <text transform="translate(130,320) rotate(-90)">B</text>
        <text transform="translate(150,320) rotate(-90)">C</text>
        <text transform="translate(170,320) rotate(-90)">D</text>
        <text transform="translate(190,320) rotate(-90)">E</text>
        <text transform="translate(210,320) rotate(-90)">F</text>
    </g>
    <g transform="translate(100,260)">
        <rect width="19" height="40"></rect>
        <text x="10" y="10">4</text>
    </g>
    <g transform="translate(120,220)">
        <rect width="19" height="80"></rect>
        <text x="10" y="10">8</text>
    </g>
    <g transform="translate(140,150)">
        <rect width="19" height="150"></rect>
        <text x="10" y="10">15</text>
    </g>
    <g transform="translate(160,140)">
        <rect width="19" height="160"></rect>
        <text x="10" y="10">16</text>
    </g>
    <g transform="translate(180,70)">
        <rect width="19" height="230"></rect>
        <text x="10" y="10">23</text>
    </g>
    <g transform="translate(200,200)">
        <rect width="19" height="100"></rect>
        <text x="10" y="10">10</text>
    </g>
    <filter id="pictureFilter">
        <feGaussianBlur stdDeviation="3" />
    </filter>
</svg>

CSS

.chart rect {
    fill: #3B7FC4;
}
.chart text {
    fill: white;
    font: 10px sans-serif;
    text-anchor: middle;
}
.labels text {
    fill: black;
    font: 10px sans-serif;
    text-anchor: start;
}
.chart:hover {
    filter: url(#pictureFilter);
}