Back

Explore Courses Blog Tutorials Interview Questions
0 votes
1 view
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.

Welcome to Intellipaat Community. Get your technical queries answered by top developers!

28.4k questions

29.7k answers

500 comments

94.1k users

Browse Categories

...