When the label size is too short, the constant for calculating

margin_size does not apply. Also nvd3 auto-adjust font-size of axis
labels.
Temporary solution here: Setting a fixed font-size on nvd3 axis labels
and a minimum threshold for label size.

caravel/assets/visualizations/nvd3_vis.css

@@ -18,6 +18,11 @@ text.nv-axislabel {
 
 .dist_bar svg.nvd3-svg {
   width: auto;
+  font-size: 14px;
+}
+
+.nv-x text{
+  font-size: 12px;
 }
 
 .bar .slice_container {

caravel/assets/visualizations/nvd3_vis.js

@@ -69,14 +69,16 @@ function nvd3Vis(slice) {
 
       // Calculates the longest label size for stretching bottom margin
       function calculateStretchMargins(payloadData) {
-        const axisLabels = payloadData.data[0].values;
         let stretchMargin = 0;
         const pixelsPerCharX = 4.5; // approx, depends on font size
-        let maxLabelSize = 0;
-        for (let i = 0; i < axisLabels.length; i++) {
-          maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
-        }
-        stretchMargin = Math.ceil(Math.max(stretchMargin, pixelsPerCharX * maxLabelSize));
+        let maxLabelSize = 10; // accomodate for shorter labels
+        payloadData.data.forEach((d) => {
+          const axisLabels = d.values;
+          for (let i = 0; i < axisLabels.length; i++) {
+            maxLabelSize = Math.max(axisLabels[i].x.length, maxLabelSize);
+          }
+        });
+        stretchMargin = Math.ceil(pixelsPerCharX * maxLabelSize);
         return stretchMargin;
       }