Fix padding for axis when turning

c3.js

@@ -2818,7 +2818,7 @@
         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);
         }
-        return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
+        return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
     };
 
     c3_chart_internal_fn.getEventRectWidth = function () {
@@ -8244,6 +8244,23 @@
             var start = domain[0], stop = domain[domain.length - 1];
             return start < stop ? [ start, stop ] : [ stop, start ];
         }
+
+        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;
+
+            if(text.length <= maxTicks){
+                return text;
+            } else {
+                return text.slice(0, maxTicks-3) + '...';
+            }
+
+        }
+
         function shouldDrawTickText(id){
             var heightLimits = [
                 // Left is width, right is n
@@ -8393,6 +8410,10 @@
                         return tickText;
                     }
 
+                    tickText = tickText.toString();
+
+                    tickText = shorten(tickText);
+
                     return [tickText];
                 }
 
@@ -8431,21 +8452,15 @@
 
                 var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
                     
-                var _first = true;
-
                 tspan.text(function (d) {
 
                     if (d.splitted.length) {
-                        if(_first) {
-                            var axisId = $$.isXAxis(orient) ? 'x' : 'y';
-
-                            $$.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)
-                            );
+                        var axisId = $$.isXAxis(orient) ? 'x' : 'y';
 
-                            _first = false;
-                        }
+                        $$.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)
+                        );
                     }
                     return d.splitted;
                 });

spec/api.grid-spec.js

@@ -41,7 +41,7 @@ describe('c3 api grid', function () {
                 grids.each(function (d, i) {
                     var y = +d3.select(this).select('line').attr('y1'),
                         text = d3.select(this).select('text').text(),
-                        expectedY = Math.round(chart.internal.y(expectedGrids[i].value)),
+                        expectedY = Math.ceil(chart.internal.y(expectedGrids[i].value)),
                         expectedText = expectedGrids[i].text;
                     expect(y).toBe(expectedY);
                     expect(text).toBe(expectedText);

src/c3.axis.js

@@ -34,6 +34,23 @@ function c3_axis(d3, params, $$) {
         var start = domain[0], stop = domain[domain.length - 1];
         return start < stop ? [ start, stop ] : [ stop, start ];
     }
+
+    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;
+
+        if(text.length <= maxTicks){
+            return text;
+        } else {
+            return text.slice(0, maxTicks-3) + '...';
+        }
+
+    }
+
     function shouldDrawTickText(id){
         var heightLimits = [
             // Left is width, right is n
@@ -183,6 +200,10 @@ function c3_axis(d3, params, $$) {
                     return tickText;
                 }
 
+                tickText = tickText.toString();
+
+                tickText = shorten(tickText);
+
                 return [tickText];
             }
 
@@ -221,21 +242,15 @@ function c3_axis(d3, params, $$) {
 
             var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
                 
-            var _first = true;
-
             tspan.text(function (d) {
 
                 if (d.splitted.length) {
-                    if(_first) {
-                        var axisId = $$.isXAxis(orient) ? 'x' : 'y';
-
-                        $$.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)
-                        );
+                    var axisId = $$.isXAxis(orient) ? 'x' : 'y';
 
-                        _first = false;
-                    }
+                    $$.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)
+                    );
                 }
                 return d.splitted;
             });

src/size.js

@@ -88,7 +88,7 @@ c3_chart_internal_fn.getHorizontalAxisHeight = function (axisId) {
     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);
     }
-    return h + ($$.getAxisLabelPositionById(axisId).isInner ? 0 : 10) + (axisId === 'y2' ? -10 : 0);
+    return h + ($$.getAxisLabelPositionById(axisId).isInner ? 5 : 10) + (axisId === 'y2' ? -10 : 0);
 };
 
 c3_chart_internal_fn.getEventRectWidth = function () {