Adding rotate labels to multiBarChart, SVG greedy in height as well

src/models/multiBarChart.js

@@ -12,6 +12,7 @@ nv.models.multiBarChart = function() {
       showControls = true,
       showLegend = true,
       reduceXTicks = true, // if false a tick will show for every data point
+      rotateLabels = 0,
       tooltips = true,
       tooltip = function(key, x, y, e, graph) {
         return '<h3>' + key + '</h3>' +
@@ -148,6 +149,12 @@ nv.models.multiBarChart = function() {
           .selectAll('text, line')
           .style('opacity', 0);
 
+      if(rotateLabels)
+        xTicks
+            .selectAll('text')
+            .attr('transform', function(d,i,j) { return 'rotate('+rotateLabels+' 0,0)' })
+            .attr('text-transform', rotateLabels > 0 ? 'start' : 'end');
+
       yAxis
         .scale(y)
         .ticks( availableHeight / 36 )
@@ -282,6 +289,12 @@ nv.models.multiBarChart = function() {
     return chart;
   };
 
+  chart.rotateLabels = function(_) {
+    if (!arguments.length) return rotateLabels;
+    rotateLabels = _;
+    return chart;
+  }
+
   chart.tooltips = function(_) {
     if (!arguments.length) return tooltips;
     tooltips = _;

src/nv.d3.css

@@ -83,6 +83,7 @@ svg {
   /* Trying to get SVG to act like a greedy block in all browsers */
   display: block;
   width:100%;
+  height:100%;
 }