Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in BI by (17.6k points)

I'm working on a Power Bi d3 chart and I'm trying to change the thickness/width of the chart's axis lines. This following code changes the width of the line but also affects the tick's labels, drastically altering the font.

this.xAxis

   .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'}) 

   .call(xAxis);

I don't want to impact the tick's labels. How can I only change the axis lines?

1 Answer

0 votes
by (47.2k points)
  • this.xAxis is the g element which groups all the axis components.  g doesn't style directly so all the elements underneath are inheriting from it (including the text elements).

  • You can do this with

this.xAxis.select('path') .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

  • It would style just the horizontal line of the axis :

this.xAxis.selectAll('line') .style({ 'stroke': 'black', 'fill': 'none', 'stroke-width': '1px'});

  • It would style the tick marks.

  • As an aside, I wouldn't style like this at all and would probably do it through conventional CSS:

.axis { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; stroke-width: 10px; }

  • It would set the font for the entire axis g and set the tick marks and line across the axis to be black and thick.

Browse Categories

...