[d3] How to remove axis tick marks?

1

How do you remove those little tick lines from an axis? Below is what my (standard) axis looks like. (I don’t have the code on codepen, but I might put together a quick pen if needed)

EDIT. I made the axis in codepen anyway.

2

Haiiiiyo!

In my case I ended up setting the CSS for fill and stroke attributes of the path and line SVG elements of the axes to none, for example:

/* SASS */
.colour-axis, .y-axis, .x-axis
  line, path
    fill: none
    stroke: none

The caveat is that the top-most and bottom-most ticks are actually part of the SVG path, so with that you will get rid of the line that separates the chart and the ticks as well.

I thought I’d quickly check again just now because that seems a bit hacky, and it turns out that you can also set .tickSize() of an axis to get rid of all of the ticks—I tested it just now and it does indeed get rid of all of the ticks (but not the line).

I hope that helps! :slight_smile:

1 Like
3

So that’s what .tickSize does! :open_mouth: Thanks! That’s what I needed.

1 Like