How To Get Striped Grey Background Resembling 100% To The Barchart?

This is a follow-up question to this question. How do I get the striped grey scale in the background which represents 100% and is parallel to Y-axis? jsFiddle Code: var data = [

Solution 1:

Here's how it works.

Updated the fiddle.

svg.selectAll(".backgound-bar")
.data(data)
.enter()
.append("rect")
.attr("class", "background-bar")
.attr("x", function(d) { return x(d.age); })
.attr("width", x.rangeBand())
.attr("y", function(d) { return y(800); })
.attr("height", height)
.style("fill", "#ddd")
.attr("rx", 10)
.attr("ry", 10)

Created a svg element with the class background-bar.

And the x and y remains the same as you've defined prior.

But the height of the bars are given to the height variable defined.

Hope this helps :)