How to rotate to Y axis label in nvd3 chart

Question

I have a multi chart in nvd3. I need to rotate the y axis labels for both yAxis1 and yAxis2. But i see there is no good option for rotating y axislabels. For rotating xAxis label it is pretty straight forward. Just uisng rotateLabels: 45 works for xAxis. But for y axis this solution doesn't work.I tried to use the rotateLabels inside yAxis:{} as following:

rotateLabels: 45

It works for x axis. But it doesn't work for y axis. I also tried using css commands like

css:{'transform':'rotate(45)'}

But nothing works at all. I cant think of any other solution.

Any one have any idea for me how can i rote the y axis labels in nvd3 chart? Thanks in advance

As per the documentation of nvd3 rotateLabels is only made for X axes. Try CSS property `css : { 'transform': 'rotate(45deg)'} ` — sandyJoshi, Dec 22 '16 at 05:06

score 1 · Accepted Answer · answered Dec 23 '16 at 03:51

You can not rotate y axis label from the chart options like this. You can do this by making just little modification in the library. Go to nvd3.js code. and find the switch block

 switch (axis.orient()) {}

And inside this block you will find

case 'top':
case 'bottom':
case 'right':
case 'left':

Here case 'left' and case 'right' are for y axes. So go inside these cases and find:

axisLabel .style('text-anchor', rotateYLabel ? 'middle' : 'begin') .attr('transform', rotateYLabel ? 'rotate(90)' : '') Now instead of rotate(90) put rotate(45) and you are all set. If you want to change other y axes property you can also change inside these case blocks.

But if you still want to modify from front end the you can select the dom element using d3 like

d3.select(".nv-y2").select(".nvd3").select("text").attr("transform","rotate(45)");

Any one of the above strategies should work.

How to rotate to Y axis label in nvd3 chart

1 Answers1