Accepted answer

The best way I have found to handle this is to perform the rotation of the x-axis tick labels yourself. Why? Because NVD3 is not handling the rotation and associated translations properly. Look at your image, and you'll see that the library allows the rotation to translate the labels out from directly under the columns they represent. It also begins to mishandle the axis.tickPadding() values, and so on.

The first thing that you need to do is to ensure that the chart has enough space for the translated labels, like so:

chart.margin({bottom: 60});

We can then translate and rotate the labels:

var xTicks ='.nv-x.nv-axis > g').selectAll('g');
  .attr('transform', function(d,i,j) { return 'translate (-10, 25) rotate(-90 0,0)' }) ;

The labels now look like this:

Rotated / translated labels


Whatever you text rotation is give start/middle/end'.nv-x.nv-axis > g > g').selectAll('g.tick text').style('text-anchor', 'start');  //start/middle/end


There is a css alternative.

.nv-x .tick text {
    transform: rotate(-90deg) translateX(-15px) translateY(-7px);


This worked for me. The main reason I'm submitting this is that changing the anchor is nicer than translating the position manually.

var xTicks ='.nv-x.nv-axis > g > g',_this.context.element).selectAll('g').selectAll('text');
xTicks.attr('transform', function() { return 'rotate(' + angle + ' 0,0)' }) ;
xTicks.attr('text-anchor',function() {
    var anchor;
    if(angle > 0){ anchor = 'start'; }
    else if(angle < 0){ anchor = 'end'; }
    else { anchor = 'middle'; }
    return anchor;


The following worked for me:

chart.axislist["xAxis"]["rotateLabels"]= -45


For multiple graph, your can add "'#' + containerId + ' svg " in the like below:

//Rotate x-axis label
var xTicks ='#' + containerId + ' svg .nv-x.nv-axis > g').selectAll('g');
    .attr('transform', function(d,i,j) { return 'translate (-15, 60) rotate(-90 0,0)' });

Anyways, Thanks for @River answer.

Related Query

More Query from same tag