CODEWITHSUNDEEP
d3.jslabel
user2100620
user2100620

Reputation: 331

Place axis text labels between ticks

How can I change where the labels are placed with respect to their ticks?

Currently I have: enter image description here

But I obviously don't want the date to be interrupted by the tick. I would like to have this: enter image description here

I have tried:

.selectAll(".tick text")
.style("text-anchor", "start")

and

.selectAll("text")
  .attr("x", 5)
  .attr("dy", null)
  .attr("text-anchor", null);

and

svg.selectAll(".axis2 text")
.attr("dx", -115);

None of the above moved the text label in anyway.

Any suggestion is appreciated!

Upvotes: 0

Views: 477

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

To select the text elements, use axisContainer.selectAll("text"), where axisContainer is the name of the selection variable that you call xAxis2 on. Then you can set attributes/styles on them.

Upvotes: 1

Related Questions