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...
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.
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.
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.
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.
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With