Added x-axis label rotation to the Axis Model and removed it from discrete bar chart

src/models/axis.js

@@ -6,6 +6,7 @@ nv.models.axis = function() {
       axisLabelText = null,
       showMaxMin = true, //TODO: showMaxMin should be disabled on all ordinal scaled axes
       highlightZero = true,
+      rotateLabels = 0,
       rotateYLabel = true;
       margin = {top: 0, right: 0, bottom: 0, left: 0}
 
@@ -69,16 +70,25 @@ nv.models.axis = function() {
           }
           break;
         case 'bottom':
+        var xLabelMargin = 30;
         var maxTextWidth = 30;
-         if(rotateLabels){
-          g.selectAll('g text').each(function(d,i){
+        if(rotateLabels%360){
+          var xTicks = g.selectAll('g').select("text");
+          //Calculate the longest xTick width
+          xTicks.each(function(d,i){
             var width = this.getBBox().width;
             if(width > maxTextWidth) maxTextWidth = width;
           });
-         }
+          //Convert to radians before calculating sin. Add 30 to margin for healthy padding.
+          var sin = Math.abs(Math.sin(rotateLabels*Math.PI/180));
+          var xLabelMargin = (sin ? sin*maxTextWidth : maxTextWidth)+30;
+          //Rotate all xTicks
+          xTicks.attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
+          .attr('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end');
+        }
         axisLabel.enter().append('text').attr('class', 'nv-axislabel')
               .attr('text-anchor', 'middle')
-              .attr('y', maxTextWidth);
+              .attr('y', xLabelMargin);
           var w = (scale.range().length==2) ? scale.range()[1] : (scale.range()[scale.range().length-1]+(scale.range()[1]-scale.range()[0]));
           axisLabel
               .attr('x', w/2);
@@ -94,7 +104,8 @@ nv.models.axis = function() {
               .select('text')
                 .attr('dy', '.71em')
                 .attr('y', axis.tickPadding())
-                .attr('text-anchor', 'middle')
+                .attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
+                .attr('text-anchor', rotateLabels%360 > 0 ? 'start' : 'end')
                 .text(function(d,i) {
                   return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d)
                 });
@@ -269,6 +280,11 @@ nv.models.axis = function() {
   	rotateYLabel = _;
   	return chart;
   }
+  chart.rotateLabels = function(_) {
+    if(!arguments.length) return rotateLabels;
+    rotateLabels = _;
+    return chart;
+  }
   chart.margin = function(_) {
   	if(!arguments.length) return margin;
   	margin = _;

src/models/discreteBarChart.js

@@ -5,7 +5,6 @@ nv.models.discreteBarChart = function() {
       height = null,
       color = nv.utils.getColor(), //a function that gets color for a datum
       staggerLabels = false,
-      rotateLabels = 0,
       tooltips = true,
       tooltip = function(key, x, y, e, graph) { 
         return '<h3>' + x + '</h3>' +
@@ -128,17 +127,6 @@ nv.models.discreteBarChart = function() {
             .selectAll('text')
             .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '0' : '12') + ')' })
 
-      if (rotateLabels)
-        xTicks
-            .selectAll('text')
-            .attr('transform', function(d,i,j) { return 'rotate(' + rotateLabels + ' 0,0)' })
-            .attr('text-anchor', rotateLabels > 0 ? 'start' : 'end') 
-
-      xTicks
-          .selectAll('text')
-          .attr('clip-path', function(d,i,j) { return rotateLabels ? '' : 'url(#nv-x-label-clip-' + discretebar.id() + ')' });
-
-
       yAxis
         .ticks( availableHeight / 36 )
         .tickSize( -availableWidth, 0);
@@ -208,12 +196,6 @@ nv.models.discreteBarChart = function() {
     return chart;
   };
 
-  chart.rotateLabels = function(_) {
-    if (!arguments.length) return rotateLabels;
-    rotateLabels = _;
-    return chart;
-  };
-
   chart.tooltips = function(_) {
     if (!arguments.length) return tooltips;
     tooltips = _;