Axis labels in NVD3.js

I'm looking for how to modify the font size and attributes of the X and Y axis label fonts in NVD3.js

The documentation doesn't seem to indicate an option for doing this. Is it possible?

Solution

There doesn't seem to be a default property for this in NVD3 or D3 itself.

However we can change font size or any other SVG CSS property by directly applying it to the text element of the axis. This can be done either by using <style> tag or by using d3.select().

Axis text labels are created by <text> nodes. For both the axis there are parent container elements which have following classes.

nv-x //for x axis <text> nodes
nv-y //for y axis <text> nodes

So it's easy to use them to set the text label CSS properties.

.nv-x text{
  font-size: 20px;
  fill: blue;
}
.nv-y text{
  font-size: 17px;
  fill:red;
}

Following is the link for other attributes which are available in NVD3.

http://nvd3-community.github.io/nvd3/examples/documentation.html

And below is the link for the SVG Axis properties in D3.

https://github.com/mbostock/d3/wiki/SVG-Axes

These do not include any information regarding setting font-size of ticks.

Following is working code sample.

<html>
<head>
	<style>
		#chart svg {
		  height: 300px;
		}
		.nv-x text{
		  font-size: 20px;
          fill: blue;
		}
        .nv-y text{
		  font-size: 17px;
          fill:red;
		}
	</style>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="http://nvd3.org/assets/css/nv.d3.css">
	<script type="text/javascript" src="http://nvd3.org/assets/lib/d3.v2.js"></script>
	<script type="text/javascript" src="http://nvd3.org/assets/lib/fisheye.js"></script>
	<script type="text/javascript" src="http://nvd3.org/assets/js/nv.d3.js"></script>
</head>
<body>
	<div id="chart">
	  <svg></svg>
	</div>


	<script>
		var data = function() {
		  var sin = [],
			  cos = [];

		  for (var i = 0; i < 100; i++) {
			sin.push({x: i, y: Math.sin(i/10)});
			cos.push({x: i, y: .5 * Math.cos(i/10)});
		  }

		  return [
			{
			  values: sin,
			  key: 'Sine Wave',
			  color: '#ff7f0e'
			},
			{
			  values: cos,
			  key: 'Cosine Wave',
			  color: '#2ca02c'
			}
		  ];
		};

		nv.addGraph(function() {
		  window.chart = nv.models.lineChart()
			.useInteractiveGuideline(true)
			;

		  chart.xAxis
			.axisLabel('Time (ms)')
			.tickFormat(d3.format(',r'))
			;

		  chart.yAxis
			.axisLabel('Voltage (v)')
			.tickFormat(d3.format('.02f'))
			;
			

		  d3.select('#chart svg')
			.datum(data())
			.transition().duration(500)
			.call(chart)
			;

		  nv.utils.windowResize(chart.update);

		  return chart;
		});

		
	</script>
</body>
</html>