D3 stacked graphs issue with bar position on x-Axis

Question

I have created sample on fiddle

[https://jsfiddle.net/xx5fkwb4/][1]

I am facing issue with value on position on x-Axis value. it's not showing on exact position.

Answer 1

The drift in the month May and Jun because you are passing Mon May 07 and for Jun Mon Jun 11 . While if you see for Apr its correct the reason is that the data has Apr 01

One solution could be to change the data to the first of the month using the code below:

  .attr("x", function(d) {
    var date = new Date(d.x.getFullYear(), d.x.getMonth(), 1);
    return x(date) - 12;
  })

working code here

Answer 2

Here, issue is with the width you selected for bar. change the width and highlight the x-axis clearly will solve your issue.

var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom")
    .tickSize(-width, 0, 0)
          .ticks(d3.time.months)
          .tickFormat(d3.time.format("%b"));

var rect = groups.selectAll("rect")
              .data(function(d) { return d; })
              .enter()
              .append("rect")
              .attr("x", function(d) { return x(d.x) - 4; })
              .attr("y", function(d) { return y(d.y0 + d.y) ; })
              .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
              .attr("width", 5)

              .on("mouseover", function() { tooltip.style("display", null); })
              .on("mouseout", function() { tooltip.style("display", "none"); })
              .on("mousemove", function(d) {
                var xPosition = d3.mouse(this)[0] - 15;
                var yPosition = d3.mouse(this)[1] - 25;
                tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
                tooltip.select("text").text(d.y);
              });

you can chanage the color of X-axis accordingly.