First version of fitting ticks on x axis

c3.js

@@ -2816,9 +2816,9 @@
         if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
         // Calculate x axis height when tick rotated
         if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
-            h = $$.getMaxTickWidth(axisId) * Math.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
+            h = $$.getMaxTickWidthAllowed(axisId) * Math.cos(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
         }
-        return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
+        return h + ($$.getAxisLabelPositionById(axisId).isInner ? 10 : 15) + (axisId === 'y2' ? -10 : 0);
     };
 
     c3_chart_internal_fn.getEventRectWidth = function () {
@@ -4875,7 +4875,20 @@
         if (config.axis_rotated) {
             return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
         } else {
-            return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
+            if(position.isInner){
+                return "-0.5em";
+            }
+
+            if(config.axis_x_height){
+                return config.axis_x_height - 10;
+            }
+
+            if(config.axis_x_tick_rotate !== 0){
+                return $$.getMaxTickWidth('x');
+            }
+
+            return 35;
+
         }
     };
     c3_chart_internal_fn.dyForYAxisLabel = function () {
@@ -4934,8 +4947,35 @@
     };
 
     c3_chart_internal_fn.getMaxTickWidth = function (id) {
-        return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
-               (this.config.tick_text_padding || 0);
+        var $$ = this;
+
+        if($$.config.maxTickTextWidth[id]){
+            return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
+        }
+
+        var ticks = $$.getXAxisTickValues();
+
+        if(ticks){
+            var m = 0;
+
+            if($$.config.axis_x_tick_format){
+                ticks = ticks.map($$.config.axis_x_tick_format);
+            }
+            ticks.forEach(function(tick){
+                m = Math.max(m, tick.toString().length);
+            });
+
+            return m * 11.5;
+        }
+
+        if(!$$.config.axis_rotated){
+            if($$.config.axis_x_tick_rotate !== 0){
+                return $$.getMaxTickWidthAllowed();
+            }
+        }
+
+        return $$.config.maxTickTextWidth.default;
+
     };
 
     c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
@@ -5022,6 +5062,9 @@
         transitions.axisY.call($$.yAxis);
         transitions.axisY2.call($$.y2Axis);
         transitions.axisSubX.call($$.subXAxis);
+
+        $$.tuneAxisTicks();
+
         // rotate tick text if needed
         if (!config.axis_rotated) {
             $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
@@ -5029,6 +5072,46 @@
         }
     };
 
+    c3_chart_internal_fn.tuneAxisTicks = function(){
+        var $$ = this;
+
+        if(!$$.isCategorized()){
+            return;
+        }
+
+        var ticks = $$.getXAxisTickValues();
+        var widthForTick = $$.getCurrentWidth() / ticks.length;
+
+        var maxTickWidth = $$.getMaxTickWidth('x');
+
+        // No overlapping
+        if(maxTickWidth <= widthForTick){
+            $$.api.axis.rotateTicks('x', 0, true);
+            return;
+        }
+
+        // No overlapping for rotation 45
+        if(45 < widthForTick){
+            $$.api.axis.rotateTicks('x', -45, true);
+            return;
+        }
+
+        // No overlapping for rotation 90
+        if(true){
+            $$.api.axis.rotateTicks('x', -90, true);
+            return;
+        }
+    };
+
+    c3_chart_internal_fn.getMaxTickWidthAllowed = function(){
+        var $$ = this;
+        // Excel shortens ticks the way so they don't take more than half of all chart
+        var padding = -10;
+        var maxWidth = $$.getCurrentHeight()/2 + padding;
+
+        return maxWidth;
+    };
+
     c3_chart_internal_fn.tuneAxis = function(sync, callback){
         var $$ = this;
 
@@ -8038,7 +8121,7 @@
         $$.redraw();
     };
 
-    c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
+    c3_chart_fn.axis.rotateTicks = function(axisId, degrees, withoutRedraw){
         var $$ = this.internal, config = $$.config;
 
         if(axisId === 'x'){
@@ -8049,7 +8132,9 @@
             throw new Error("Can't rotate ticks for axis " + axisId);
         }
 
-        this.flush();
+        if(!withoutRedraw){
+            this.flush();
+        }
     };
 
     c3_chart_fn.legend = function () {};
@@ -8246,12 +8331,7 @@
         }
 
         function shorten(text){
-
-            // Excel shortens ticks the way so they don't take more than half of all chart
-            var padding = 20;
-            var maxWidth = $$.getCurrentWidth()/2 - padding;
-
-            var maxTicks = maxWidth / 11.5;
+            var maxTicks = $$.getMaxTickWidthAllowed() / 11.5;
 
             if(text.length <= maxTicks){
                 return text;
@@ -8457,14 +8537,18 @@
                     if (d.splitted.length) {
                         var axisId = $$.isXAxis(orient) ? 'x' : 'y';
 
+                        var rotate = $$.config.axis_x_tick_rotate;
+
                         $$.config.maxTickTextWidth[axisId] = Math.max(
                             $$.config.maxTickTextWidth[axisId] || 0,
-                            d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos($$.config.axis_x_tick_rotate)
+                            d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos(rotate) + fontSize * Math.sin(rotate)
                         );
                     }
+
                     return d.splitted;
                 });
 
+
                 var line = tick.select("line");
 
                 if($$.isXAxis(orient)){

src/api.axis.js

@@ -120,7 +120,7 @@ c3_chart_fn.axisY2 = function(value){
     $$.redraw();
 };
 
-c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
+c3_chart_fn.axis.rotateTicks = function(axisId, degrees, withoutRedraw){
     var $$ = this.internal, config = $$.config;
 
     if(axisId === 'x'){
@@ -131,5 +131,7 @@ c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
         throw new Error("Can't rotate ticks for axis " + axisId);
     }
 
-    this.flush();
+    if(!withoutRedraw){
+        this.flush();
+    }
 };

src/axis.js

@@ -253,7 +253,20 @@ c3_chart_internal_fn.dyForXAxisLabel = function () {
     if (config.axis_rotated) {
         return position.isInner ? "1.2em" : -25 - $$.getMaxTickWidth('x');
     } else {
-        return position.isInner ? "-0.5em" : config.axis_x_height ? config.axis_x_height - 10 : "3em";
+        if(position.isInner){
+            return "-0.5em";
+        }
+
+        if(config.axis_x_height){
+            return config.axis_x_height - 10;
+        }
+
+        if(config.axis_x_tick_rotate !== 0){
+            return $$.getMaxTickWidth('x');
+        }
+
+        return 35;
+
     }
 };
 c3_chart_internal_fn.dyForYAxisLabel = function () {
@@ -312,8 +325,35 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
 };
 
 c3_chart_internal_fn.getMaxTickWidth = function (id) {
-    return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
-           (this.config.tick_text_padding || 0);
+    var $$ = this;
+
+    if($$.config.maxTickTextWidth[id]){
+        return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
+    }
+
+    var ticks = $$.getXAxisTickValues();
+
+    if(ticks){
+        var m = 0;
+
+        if($$.config.axis_x_tick_format){
+            ticks = ticks.map($$.config.axis_x_tick_format);
+        }
+        ticks.forEach(function(tick){
+            m = Math.max(m, tick.toString().length);
+        });
+
+        return m * 11.5;
+    }
+
+    if(!$$.config.axis_rotated){
+        if($$.config.axis_x_tick_rotate !== 0){
+            return $$.getMaxTickWidthAllowed();
+        }
+    }
+
+    return $$.config.maxTickTextWidth.default;
+
 };
 
 c3_chart_internal_fn.updateAxisLabels = function (withTransition) {
@@ -400,6 +440,9 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
     transitions.axisY.call($$.yAxis);
     transitions.axisY2.call($$.y2Axis);
     transitions.axisSubX.call($$.subXAxis);
+
+    $$.tuneAxisTicks();
+
     // rotate tick text if needed
     if (!config.axis_rotated) {
         $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
@@ -407,6 +450,46 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
     }
 };
 
+c3_chart_internal_fn.tuneAxisTicks = function(){
+    var $$ = this;
+
+    if(!$$.isCategorized()){
+        return;
+    }
+
+    var ticks = $$.getXAxisTickValues();
+    var widthForTick = $$.getCurrentWidth() / ticks.length;
+
+    var maxTickWidth = $$.getMaxTickWidth('x');
+
+    // No overlapping
+    if(maxTickWidth <= widthForTick){
+        $$.api.axis.rotateTicks('x', 0, true);
+        return;
+    }
+
+    // No overlapping for rotation 45
+    if(45 < widthForTick){
+        $$.api.axis.rotateTicks('x', -45, true);
+        return;
+    }
+
+    // No overlapping for rotation 90
+    if(true){
+        $$.api.axis.rotateTicks('x', -90, true);
+        return;
+    }
+};
+
+c3_chart_internal_fn.getMaxTickWidthAllowed = function(){
+    var $$ = this;
+    // Excel shortens ticks the way so they don't take more than half of all chart
+    var padding = -10;
+    var maxWidth = $$.getCurrentHeight()/2 + padding;
+
+    return maxWidth;
+};
+
 c3_chart_internal_fn.tuneAxis = function(sync, callback){
     var $$ = this;
 

src/c3.axis.js

@@ -36,12 +36,7 @@ function c3_axis(d3, params, $$) {
     }
 
     function shorten(text){
-
-        // Excel shortens ticks the way so they don't take more than half of all chart
-        var padding = 20;
-        var maxWidth = $$.getCurrentWidth()/2 - padding;
-
-        var maxTicks = maxWidth / 11.5;
+        var maxTicks = $$.getMaxTickWidthAllowed() / 11.5;
 
         if(text.length <= maxTicks){
             return text;
@@ -247,14 +242,18 @@ function c3_axis(d3, params, $$) {
                 if (d.splitted.length) {
                     var axisId = $$.isXAxis(orient) ? 'x' : 'y';
 
+                    var rotate = $$.config.axis_x_tick_rotate;
+
                     $$.config.maxTickTextWidth[axisId] = Math.max(
                         $$.config.maxTickTextWidth[axisId] || 0,
-                        d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos($$.config.axis_x_tick_rotate)
+                        d.splitted.length * fontSize / $$.config.text_h_to_w * Math.cos(rotate) + fontSize * Math.sin(rotate)
                     );
                 }
+
                 return d.splitted;
             });
 
+
             var line = tick.select("line");
 
             if($$.isXAxis(orient)){

src/size.js

@@ -86,9 +86,9 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
     if (axisId === 'y2' && !config.axis_y2_show) { return $$.rotated_padding_top; }
     // Calculate x axis height when tick rotated
     if (axisId === 'x' && !config.axis_rotated && config.axis_x_tick_rotate) {
-        h = $$.getMaxTickWidth(axisId) * Math.sin(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
+        h = $$.getMaxTickWidthAllowed(axisId) * Math.cos(Math.PI * Math.abs(config.axis_x_tick_rotate) / 180);
     }
-    return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
+    return h + ($$.getAxisLabelPositionById(axisId).isInner ? 10 : 15) + (axisId === 'y2' ? -10 : 0);
 };
 
 c3_chart_internal_fn.getEventRectWidth = function () {