Stable version of ticks rotation

c3.js

@@ -796,16 +796,21 @@
                                              false;
         // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called)
         $$.updateSizes();
+        transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
+
         // MEMO: called in updateLegend in redraw if withLegend
         if (!(options.withLegend && config.legend_show)) {
-            transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
             // Update scales
             $$.updateScales();
             $$.updateSvgSize();
             // Update g positions
             $$.transformAll(options.withTransitionForTransform, transitions);
         }
-        // Draw with new sizes & scales
+
+        $$.redrawAxis(transitions);
+        // MEMO: Draw with new sizes & scales
+        $$.updateScales();
+        $$.updateSvgSize();
         $$.redraw(options, transitions);
     };
     c3_chart_internal_fn.redrawWithoutRescale = function () {
@@ -4952,32 +4957,28 @@
     c3_chart_internal_fn.getMaxTickWidth = function (id) {
         var $$ = this;
 
-        if($$.config.maxTickTextWidth[id]){
-            return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
-        }
+        if(id === 'x'){
+            var ticks = $$.getXAxisTickValues();
 
-        var ticks = $$.getXAxisTickValues();
+            if(ticks){
+                var m = 0;
 
-        if(ticks){
-            var m = 0;
-
-            if($$.config.axis_x_tick_format){
-                ticks = ticks.map($$.config.axis_x_tick_format);
-            }
+                if($$.config.axis_x_tick_format){
+                    ticks = ticks.map($$.config.axis_x_tick_format);
+                }
 
-            ticks = ticks.map($$.shorten.bind($$));
+                ticks = ticks.map($$.shorten.bind($$));
 
-            ticks.forEach(function(tick){
-                m = Math.max(m, tick.toString().length);
-            });
+                ticks.forEach(function(tick){
+                    m = Math.max(m, tick.toString().length);
+                });
 
-            return m * 11.5;
+                return m * 5.5;
+            }
         }
 
-        if(!$$.config.axis_rotated){
-            if($$.config.axis_x_tick_rotate !== 0){
-                return $$.getMaxTickWidthAllowed();
-            }
+        if($$.config.maxTickTextWidth[id]){
+            return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
         }
 
         return $$.config.maxTickTextWidth.default;
@@ -5076,6 +5077,10 @@
             $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
             $$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate);
         }
+
+        //$$.updateSizes();
+        //$$.updateScales();
+        //$$.updateSvgSize();
     };
 
     c3_chart_internal_fn.tuneAxisTicks = function(){
@@ -5097,7 +5102,7 @@
         }
 
         // No overlapping for rotation 45
-        if(45 < widthForTick){
+        if(maxTickWidth / Math.sqrt(2) < widthForTick){
             $$.config.axis_x_tick_rotate = -45;
             return;
         }
@@ -5113,14 +5118,15 @@
         var $$ = this;
         var widthCoef, heightCoef;
 
-        var width = $$.getCurrentWidth();
+        var widthPadding = 0;
+        var width = $$.getCurrentWidth() - $$.margin.left - $$.margin.right;
         var ticks = $$.getXAxisTickValues() || [];
         var ticksNum = ticks.length;
-        widthCoef = width / ticksNum;
+        widthCoef = width / ticksNum + widthPadding;
 
+        var heightPadding = -30;
         // Excel shortens ticks the way so they don't take more than half of all chart
-        var padding = -10;
-        heightCoef  = $$.getCurrentHeight()/2 + padding;
+        heightCoef  = $$.getCurrentHeight()/2 + heightPadding;
 
         return Math.max(widthCoef, heightCoef);
     };
@@ -5322,7 +5328,7 @@
 
         text = text.toString();
 
-        var maxTicks = $$.getMaxTickWidthAllowed() / 11.5;
+        var maxTicks = $$.getMaxTickWidthAllowed() / 7.5;
 
         if(text.length <= maxTicks){
             return text;

src/axis.js

@@ -330,32 +330,28 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
 c3_chart_internal_fn.getMaxTickWidth = function (id) {
     var $$ = this;
 
-    if($$.config.maxTickTextWidth[id]){
-        return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
-    }
-
-    var ticks = $$.getXAxisTickValues();
+    if(id === 'x'){
+        var ticks = $$.getXAxisTickValues();
 
-    if(ticks){
-        var m = 0;
+        if(ticks){
+            var m = 0;
 
-        if($$.config.axis_x_tick_format){
-            ticks = ticks.map($$.config.axis_x_tick_format);
-        }
+            if($$.config.axis_x_tick_format){
+                ticks = ticks.map($$.config.axis_x_tick_format);
+            }
 
-        ticks = ticks.map($$.shorten.bind($$));
+            ticks = ticks.map($$.shorten.bind($$));
 
-        ticks.forEach(function(tick){
-            m = Math.max(m, tick.toString().length);
-        });
+            ticks.forEach(function(tick){
+                m = Math.max(m, tick.toString().length);
+            });
 
-        return m * 11.5;
+            return m * 5.5;
+        }
     }
 
-    if(!$$.config.axis_rotated){
-        if($$.config.axis_x_tick_rotate !== 0){
-            return $$.getMaxTickWidthAllowed();
-        }
+    if($$.config.maxTickTextWidth[id]){
+        return $$.config.maxTickTextWidth[id] + ($$.config.tick_text_padding || 0);
     }
 
     return $$.config.maxTickTextWidth.default;
@@ -454,6 +450,10 @@ c3_chart_internal_fn.redrawAxis = function (transitions, isHidden) {
         $$.rotateTickText($$.axes.x, transitions.axisX, config.axis_x_tick_rotate);
         $$.rotateTickText($$.axes.subx, transitions.axisSubX, config.axis_x_tick_rotate);
     }
+
+    //$$.updateSizes();
+    //$$.updateScales();
+    //$$.updateSvgSize();
 };
 
 c3_chart_internal_fn.tuneAxisTicks = function(){
@@ -475,7 +475,7 @@ c3_chart_internal_fn.tuneAxisTicks = function(){
     }
 
     // No overlapping for rotation 45
-    if(45 < widthForTick){
+    if(maxTickWidth / Math.sqrt(2) < widthForTick){
         $$.config.axis_x_tick_rotate = -45;
         return;
     }
@@ -491,14 +491,15 @@ c3_chart_internal_fn.getMaxTickWidthAllowed = function(){
     var $$ = this;
     var widthCoef, heightCoef;
 
-    var width = $$.getCurrentWidth();
+    var widthPadding = 0;
+    var width = $$.getCurrentWidth() - $$.margin.left - $$.margin.right;
     var ticks = $$.getXAxisTickValues() || [];
     var ticksNum = ticks.length;
-    widthCoef = width / ticksNum;
+    widthCoef = width / ticksNum + widthPadding;
 
+    var heightPadding = -30;
     // Excel shortens ticks the way so they don't take more than half of all chart
-    var padding = -10;
-    heightCoef  = $$.getCurrentHeight()/2 + padding;
+    heightCoef  = $$.getCurrentHeight()/2 + heightPadding;
 
     return Math.max(widthCoef, heightCoef);
 };
@@ -700,7 +701,7 @@ c3_chart_internal_fn.shorten = function(text){
 
     text = text.toString();
 
-    var maxTicks = $$.getMaxTickWidthAllowed() / 11.5;
+    var maxTicks = $$.getMaxTickWidthAllowed() / 7.5;
 
     if(text.length <= maxTicks){
         return text;

src/core.js

@@ -791,16 +791,21 @@ c3_chart_internal_fn.updateAndRedraw = function (options) {
                                          false;
     // MEMO: this needs to be called before updateLegend and it means this ALWAYS needs to be called)
     $$.updateSizes();
+    transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
+
     // MEMO: called in updateLegend in redraw if withLegend
     if (!(options.withLegend && config.legend_show)) {
-        transitions = $$.generateAxisTransitions(options.withTransitionForAxis ? config.transition_duration : 0);
         // Update scales
         $$.updateScales();
         $$.updateSvgSize();
         // Update g positions
         $$.transformAll(options.withTransitionForTransform, transitions);
     }
-    // Draw with new sizes & scales
+
+    $$.redrawAxis(transitions);
+    // MEMO: Draw with new sizes & scales
+    $$.updateScales();
+    $$.updateSvgSize();
     $$.redraw(options, transitions);
 };
 c3_chart_internal_fn.redrawWithoutRescale = function () {