D3 Horizontal Stacked Bar Chart Axis Cut Off

Hope someone can help, I have a slight problem in that the horizontal axis label 100 gets cut off the end of the stacked horizontal barchart. I can't seem to figure out what is wro

Solution 1:

You are really better off using the xScale for both dimensions, x and y. After all, your y is really a width. Here is what I mean:

...
//Set up scalesvar xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
        return d3.max(d, function (d) {
            return d.y0 + d.y;
        });
    })])
    .range([0, w]); // no need to tamper with margins since w already accounts for that
...
// Add a rect for each data valuevar rects = groups.selectAll("rect")
    .data(function (d) {return d;})
  .enter()
  .append("rect")
    .attr("x", function (d) {
        returnxScale(d.y0); // use x scale
    })
    .attr("y", 50)
    .attr("height", 50)
    .attr("width", function (d) {
        returnxScale(d.y); // use x scale
    })
...

And here is the updated FIDDLE. You can go ahead and make changes to the right margin value and any of your data y values (I placed comments in the code to that effect) and you can see that this solution scales well.