D3.js changes the line style of the line along the X axis

Question

In d3.js charts, the x-axis line (the black line between the bars and bar labels) looks like this by default: | ---------------- |, see screenshot below:

How can I change this to a straight line (without vertical lines at both ends)?

If you look at the generated SVG, this code seems to define the style: <path class="domain" d="M0,6V0H824V6"></path> , which is automatically generated by D3.

Thanks!

Answer 1

This is controlled by axis.outerTickSize() :

An external tick size of 0 suppresses the square ends of the domain path, instead creating a straight line.

All you have to do is set axis.outerTickSize(0) .

Answer 2

Lars Kotthoff's answer is still valid for versions d3 to 4.x, with version 4 it changed to axis.tickSizeOuter() . Note that tickSize() also changes the external ticks, which means that the order in which tickSize() and tickSizeOuter() called is important.

 d3.axisBottom(xScale) .tickValues(series) .tickSize(5) .tickSizeOuter(0) );