CODEWITHSUNDEEP
javascriptd3.jsvisualization
Art3mis
Art3mis

Reputation: 109

How to change the color of a d3.js axis line

Here is my code. I want to change the color of the actual axis line from black to grey.

var xAxisCall = d3.axisBottom(x);
  g.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0, " + height + ")")
    .call(xAxisCall)
    .selectAll("text")
        .attr("y", "10")
        .attr("x", "-5")
        .attr("text-anchor", "end")
        .attr("transform", "rotate(-40)")
        .style("fill", "#999999");

Upvotes: 1

Views: 4883

Answers (1)

angus l
angus l

Reputation: 1587

If you're using D3 v5 (and possibly v4) the default styling is now embedded at the element level, which saves you having to specify it yourself in CSS. One way to get over this is to override it with CSS's !important flag.

.x.axis line {
    stroke: gray !important;
}

Alternatively re-apply it to the elements after calling the axis using d3:

d3.selectAll(".x.axis line")
    .style("stroke","gray");

A little finessing may be required, but the principle should work.

Upvotes: 7

Related Questions