D3 - Simple bar with Label

by rajeshpillai

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

div.chart{
font-family:sans-serif;
font-size:0.7em;
position: relative;
}

div.bar {
background-color:DarkRed;
color:white;
height:3em;
line-height:3em;
padding-right:1em;
margin-bottom:2px;
text-align:right;
 margin-left:22em;
}

div.label {
    height:3em;
    line-height:3em;
    padding-right:1em;
    margin-bottom:2px;
    float:left;
    width:20em;
    text-align:left;
}

JavaScript

var data = [
    {
    "name": "Product 1",
    "sales": "37"
    },
     {
    "name": "Product 2",
         "sales": "3"
    },
     {
    "name": "Product 3",
         "sales": "400"
    },
     {
    "name": "Product 4",
         "sales": "25"
    }
];


draw(data);

var maxWidth = 600;

function draw(data) {
    d3.select("body")
            .append("div")
            .attr("class", "chart")
            .selectAll("div.bar")
            .data(data)
            .enter()
            .append("div")
            .attr("class","line")
    
        d3.selectAll("div.line")
            .append("div")
            .attr("class","label")
            .text(function(d){return d.name})
        
        d3.selectAll("div.line")
            .append("div")
            .attr("class","bar")
            .style("width", function(d){return d.sales + "px"})
            .text(function(d){return Math.round(d.sales)});
    

}