score:1

Accepted answer

You can do something like this:

for making the y axis

d3.select(".chart").selectAll("div").data(data).enter()
.append("div")
.style("width","1px")
.style("height",height*2 + "px")
.style("padding-top","0.1px")
.style("padding","0.1px")
.style("background-color","black")

for making bars

.append("div")
.style({stroke: "black", "stroke-width": "2px"})
.style("height", function(d) { return height+"px"; })
.style("font-size","20px")
.style("margin-top","10px")
.style("text-align","left")
.style("width", function(d) {
    return (d.value+100) + "px";
}).style("background-color", function(d, i) {
    return color(i);
}).text(function(d, i) {
    return data[i].label;
})

For making text @ the end of bar:

.append("p")
.style("margin-top", function(d) {
    return -height -5 + "px";
})
.style("margin-left", function(d) {
    return (d.value+100) +10 + "px";
})

.style("color","black")
.text(function(d){ return d.value});

working code here

score:0

Stroke width for dashed lines

svg.append("path")
       .datum(data1)
       .attr("class", "line blue")
       .attr("stroke-width", "3px")
       .attr("d", line1);

Related Query