D3.js: can I offset tick labels from tick lines?

Question

I'm working in D3.js and I'd like to draw an axis with tick labels offset from tick lines.

An image may be the best way to explain this:

So the white tick lines are not in the same place as the Jan/Feb/Mar tick labels, but are offset along the x-axis.

I am currently using an ordinal series for the x-axis, and passing in a set of explicit tickValues.

I can't see any way to offset tick lines from tick labels in the D3 axis documentation. Should I simply draw the ticks manually?

Answer 1

This is indeed not directly supported, but you do have a couple of options.

• You could have two different axes, one for the ticks and one for the labels.
• You could hack it using the major and minor ticks. See the first answer to this question.
• You could explicitly select the labels and offset them. See the other answer to the same question or this mailing list thread.

Depending on what you want to do, one solution may be better than the others. In particular, you need to consider whether you want all of this to update dynamically.

Answer 2

You might want to consider using D3FC, which has a drop-in replacement for the D3 axis component that supports this feature.

With D3FC you can swap out the D3 axis for a D3FC ordinal axis as follows:

const axis = fc.axisOrdinalBottom(scale);

The D3FC ordinal axis renders labels in the center of each bar, and the ticks in between, as shown below:

Full disclosure - I'm a maintainer and active contributor to the D3FC project.