Nudging tick labels down in D3

I’m on the third final project for the Data Visualization course, and I’m almost finished except for one thing.

In the example we’re supposed to emulate, the labels for the months on the Y axis are supposed to be in the middle of the rectangles, but I have them at the top of the rectangles.

Is there an easy way to bump them down by a few pixels or some percentage? Thank you!

Link to pen:

One way to do it is to add a set of tick values to your y-axis to position them manually. It will probably pass the tests this way, but manually is usually not the best way.

The better way is to let D3 do the work for you and to use a band scale on the y-axis. This scale is a better fit for the data anyway as we are considering the months to be buckets or labels into which we sort data (which means band scale) and not a continuous number of months (like counting, which means linear scale). Band scale ticks are automatically centered on the band. A time scale could also work, but would have the same problems as a linear scale since it too is continuous.

1 Like

Awesome! Never knew about scaleBand, but it looks super useful and works great here. Much appreciated!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.