CODEWITHSUNDEEP
javascriptd3.jsgraph
kamlesh.bar
kamlesh.bar

Reputation: 1814

D3 stacked graphs issue with bar position on x-Axis

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.

Upvotes: 1

Views: 40

Answers (2)

Cyril Cherian
Cyril Cherian

Reputation: 32327

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

Upvotes: 2

Krupall
Krupall

Reputation: 409

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.

enter image description here

Upvotes: 0

Related Questions