Some modification to discreteBar charts, fixed resize and added staggeredLabel option to x axis labels to prevent overlap

examples/discreteBarChart.html

@@ -93,6 +93,7 @@ nv.charts.discreteBar()
     .data(historicalBarChart)
     .x(function(d) { return d.label })
     .y(function(d) { return d.value })
+    .staggerLabels(historicalBarChart[0].values.length > 8)
     .build();
 
 

examples/discreteBarWithAxes.html

@@ -108,7 +108,8 @@ nv.addGraph({
 
     chart
         .width(width)
-        .height(height);
+        .height(height)
+        .staggerLabels(true);
 
     chart.xAxis
         .tickFormat(xTickFormat);

src/charts/discreteBarChart.js

@@ -76,7 +76,8 @@ nv.charts.discreteBar = function() {
             d3.select(selector + ' svg')
                 .attr('width', graph.width()()) //need to set SVG dimensions, chart is not aware of the SVG component
                 .attr('height', graph.height()())
-                .call(graph);
+                .transition().duration(duration).call(graph);
+                //.call(graph);
           }
         );
       }
@@ -147,7 +148,7 @@ nv.charts.discreteBar = function() {
     return chart;
   };
 
-  d3.rebind(chart, graph, 'x', 'y');
+  d3.rebind(chart, graph, 'x', 'y', 'staggerLabels');
 
   chart.graph = graph; // Give direct access for getter/setters, and dispatchers
 

src/models/discreteBarWithAxes.js

@@ -3,7 +3,8 @@ nv.models.discreteBarWithAxes = function() {
   var margin = {top: 30, right: 20, bottom: 50, left: 60},
       width = function() { return 960 },
       height = function() { return 500 },
-      color = d3.scale.category20().range();
+      color = d3.scale.category20().range(),
+      staggerLabels = false;
 
   var discretebar = nv.models.discreteBar(),
       x = discretebar.xScale(),
@@ -68,19 +69,21 @@ nv.models.discreteBarWithAxes = function() {
       d3.transition(g.select('.x.axis'))
           .call(xAxis);
 
+
       var xTicks = g.select('.x.axis').selectAll('g');
 
-/*
-      xTicks
-          .selectAll('line, text')
-          .style('opacity', 1)
+      if (staggerLabels)
+        xTicks
+            .selectAll('text')
+            .attr('transform', function(d,i,j) { return 'translate(0,' + (j % 2 == 0 ? '0' : '12') + ')' })
 
+          /*
       xTicks.filter(function(d,i) {
             return i % Math.ceil(data[0].values.length / (availableWidth / 100)) !== 0;
           })
           .selectAll('line, text')
           .style('opacity', 0)
-*/
+         */
 
       yAxis
         .scale(y)
@@ -138,6 +141,12 @@ nv.models.discreteBarWithAxes = function() {
     return chart;
   };
 
+  chart.staggerLabels = function(_) {
+    if (!arguments.length) return staggerLabels;
+    staggerLabels = _;
+    return chart;
+  };
+
 
   return chart;
 }