diff --git a/caravel/assets/visualizations/nvd3_vis.css b/caravel/assets/visualizations/nvd3_vis.css
index bfa08daa6a3f9..d92440e7ef7cc 100644
--- a/caravel/assets/visualizations/nvd3_vis.css
+++ b/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 {
diff --git a/caravel/assets/visualizations/nvd3_vis.js b/caravel/assets/visualizations/nvd3_vis.js
index 8ed92235cb426..60db14ab456e5 100644
--- a/caravel/assets/visualizations/nvd3_vis.js
+++ b/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;
       }