Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

D3: change font size of axis labels

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...

like image 666
smcs Avatar asked Jan 20 '16 02:01

smcs


People also ask

How do I change axis label font?

Change the format of text in category axis labelsRight-click the category axis labels you want to format, and then select Font. On the Font tab, pick the formatting options you want.

How do I change font size in Axis?

To change the text font for any chart element, such as a title or axis, right–click the element, and then click Font. When the Font box appears make the changes you want. Here's an example—suppose you want to change the font size of the chart title. Right click the chart title and click Font.

What is tickSize in D3?

tickSize() function in D3. js is used to set the inner and outer tick size to the specified value and returns the axis. If size is not specified, returns the current inner tick size, which defaults to 6.

What is D3 js axis component?

D3 provides functions to draw axes. An axis is made of Lines, Ticks and Labels. An axis uses a Scale, so each axis will need to be given a scale to work with.


1 Answers

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);
like image 198
smcs Avatar answered Sep 17 '22 19:09

smcs