I want to specify a font size for the labels of a time axis created with D3. I've tried following this answer with this fiddle, but it doesn't seem to do anything. I've also tried

d3.selectAll(".xAxis>.tick>text")
  .each(function(d, i){
    d3.select(this).style("font-size",30);
  });

to no avail. It can't be that hard...

I want to specify a font size for the labels of a time axis created with D3. I've tried following this answer with this fiddle, but it doesn't seem to do anything. I've also tried

d3.selectAll(".xAxis>.tick>text")
  .each(function(d, i){
    d3.select(this).style("font-size",30);
  });

to no avail. It can't be that hard...

• javascript
• css
• d3.js

• The fiddle you've linked to works fine. Try changing the font size. – Lars Kotthoff Commented Jan 20, 2016 at 2:39
• Huh, now that you said that I tried it in different browsers. It does work for me in Chrome but not in Edge or Firefox, where the font size remains completely unchanged at about 15px. Any idea why? – smcs Commented Jan 20, 2016 at 3:39
• 2 Okay, one has to specify the unit, i.e. "60px" instead of just 60. Gee – smcs Commented Jan 20, 2016 at 3:47

2 Answers 2

It turns out that a unitless number is technically not a valid CSS font size specifier and that it may depend on the browser whether it is ignored or not. Therefore, use

d3.select(this).style("font-size","30px");

instead of

d3.select(this).style("font-size",30);

Using below Code can set any styles of X label

const formatXLabel=()=>{
   const parent = document.querySelector("."+ props.xAxis.class);
   for(let x = 0; x<parent.children.length; x++) {

       const ticks = parent.children.item(x);
       if(ticks !==null && ticks.className.baseVal === 'tick') {
           try {
               const text = ticks.querySelector("text");
               for (let sp in props.xAxis.labelStyles) {
                   text.style[sp.toString()] = props.xAxis.labelStyles[sp];
               }
           }catch (e){
            console.log(e);
           }
       }
   }
}