Add API for rotating axis ticks. Improve text width calculation for rotated ticks

c3.js

@@ -1329,10 +1329,12 @@
             tick_text_padding: 0,
             // change this when you change font-family!
             text_h_to_w: 1.76,
-            // used when size is not available yet
-            default_tick_width: 30,
             // caching
-            shouldCache: true
+            shouldCache: true,
+
+            maxTickTextWidth: {
+                default: 30
+            }
         };
 
         Object.keys(this.additionalConfig).forEach(function (key) {
@@ -2814,7 +2816,7 @@
         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.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
+            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);
     };
@@ -4923,8 +4925,8 @@
             .attr('dx', this.xForRotatedTickText(rotate));
     };
 
-    c3_chart_internal_fn.getMaxTickWidth = function () {
-        return (this.config.maxTickTextWidth || this.config.default_tick_width) +
+    c3_chart_internal_fn.getMaxTickWidth = function (id) {
+        return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
                (this.config.tick_text_padding || 0);
     };
 
@@ -8027,6 +8029,20 @@
         $$.redraw();
     };
 
+    c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
+        var $$ = this.internal, config = $$.config;
+
+        if(axisId === 'x'){
+            config.axis_x_tick_rotate = degrees;
+        } else if(axisId === 'y'){
+            config.axis_y_tick_rotate = degrees;
+        } else {
+            throw new Error("Can't rotate ticks for axis " + axisId);
+        }
+
+        this.flush();
+    };
+
     c3_chart_fn.legend = function () {};
     c3_chart_fn.legend.show = function (targetIds) {
         var $$ = this.internal;
@@ -8389,31 +8405,6 @@
 
                 text = tick.select("text");
 
-                if(typeof turn_axis_ticks !== 'undefined' || typeof turn_axis_ticks_90 !== 'undefined'){
-                    if($$.isXAxis(orient) && params.isCategory){
-                        if(typeof turn_axis_ticks !== 'undefined'){
-                            text.attr('transform', function(d, i){
-                                var tickText = splitTickText(d)[0];
-                                var offset = 7;
-
-                                var tickSize = getSizeFor1Char(tickText).w * tickText.length;
-
-                                return 'rotate(-45) translate(' + (-tickSize / 2 - offset) + ', ' + (-tickOffset / Math.sqrt(2) / 2) + ')';
-                            });
-                        } else {
-                            text.attr('transform', function(d){
-                                var tickText = splitTickText(d)[0];
-                                var offset = 10;
-
-                                var tickSize = getSizeFor1Char(tickText).w * tickText.length;
-                                var charHeight = getSizeFor1Char(tickText).h;
-
-                                return 'rotate(-90) translate(' + (-tickSize/2 - offset) + ', ' + (-charHeight) + ')';
-                            });
-                        }
-                    }
-                }
-
                 text.style('display', function(d, i){
                     return shouldDrawTickText(i - indexOfZero) ? 'block' : 'none';
                 });
@@ -8431,14 +8422,21 @@
 
                 var fontSize = parseFloat(getStyleValue($$, '.c3-axis-y .tick', 'font-size'));
                     
+                var _first = true;
+
                 tspan.text(function (d) {
+
                     if (d.splitted.length) {
-                        // FIXME this should know when
-                        // ticks are rotated
-                        $$.config.maxTickTextWidth = Math.max(
-                            $$.config.maxTickTextWidth || 0,
-                            d.splitted.length * fontSize / $$.config.text_h_to_w
+                        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)
                             );
+
+                            _first = false;
+                        }
                     }
                     return d.splitted;
                 });

src/api.axis.js

@@ -119,3 +119,17 @@ c3_chart_fn.axisY2 = function(value){
     
     $$.redraw();
 };
+
+c3_chart_fn.axis.rotateTicks = function(axisId, degrees){
+    var $$ = this.internal, config = $$.config;
+
+    if(axisId === 'x'){
+        config.axis_x_tick_rotate = degrees;
+    } else if(axisId === 'y'){
+        config.axis_y_tick_rotate = degrees;
+    } else {
+        throw new Error("Can't rotate ticks for axis " + axisId);
+    }
+
+    this.flush();
+};

src/axis.js

@@ -303,8 +303,8 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
         .attr('dx', this.xForRotatedTickText(rotate));
 };
 
-c3_chart_internal_fn.getMaxTickWidth = function () {
-    return (this.config.maxTickTextWidth || this.config.default_tick_width) +
+c3_chart_internal_fn.getMaxTickWidth = function (id) {
+    return (this.config.maxTickTextWidth[id] || this.config.maxTickTextWidth.default) +
            (this.config.tick_text_padding || 0);
 };
 

src/c3.axis.js

@@ -204,31 +204,6 @@ function c3_axis(d3, params, $$) {
 
             text = tick.select("text");
 
-            if(typeof turn_axis_ticks !== 'undefined' || typeof turn_axis_ticks_90 !== 'undefined'){
-                if($$.isXAxis(orient) && params.isCategory){
-                    if(typeof turn_axis_ticks !== 'undefined'){
-                        text.attr('transform', function(d, i){
-                            var tickText = splitTickText(d)[0];
-                            var offset = 7;
-
-                            var tickSize = getSizeFor1Char(tickText).w * tickText.length;
-
-                            return 'rotate(-45) translate(' + (-tickSize / 2 - offset) + ', ' + (-tickOffset / Math.sqrt(2) / 2) + ')';
-                        });
-                    } else {
-                        text.attr('transform', function(d){
-                            var tickText = splitTickText(d)[0];
-                            var offset = 10;
-
-                            var tickSize = getSizeFor1Char(tickText).w * tickText.length;
-                            var charHeight = getSizeFor1Char(tickText).h;
-
-                            return 'rotate(-90) translate(' + (-tickSize/2 - offset) + ', ' + (-charHeight) + ')';
-                        });
-                    }
-                }
-            }
-
             text.style('display', function(d, i){
                 return shouldDrawTickText(i - indexOfZero) ? 'block' : 'none';
             });
@@ -246,14 +221,21 @@ 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) {
-                    // FIXME this should know when
-                    // ticks are rotated
-                    $$.config.maxTickTextWidth = Math.max(
-                        $$.config.maxTickTextWidth || 0,
-                        d.splitted.length * fontSize / $$.config.text_h_to_w
+                    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)
                         );
+
+                        _first = false;
+                    }
                 }
                 return d.splitted;
             });

src/config.js

@@ -211,10 +211,12 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         tick_text_padding: 0,
         // change this when you change font-family!
         text_h_to_w: 1.76,
-        // used when size is not available yet
-        default_tick_width: 30,
         // caching
-        shouldCache: true
+        shouldCache: true,
+
+        maxTickTextWidth: {
+            default: 30
+        }
     };
 
     Object.keys(this.additionalConfig).forEach(function (key) {

src/size.js

@@ -86,7 +86,7 @@ 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.cos(Math.PI * (90 - config.axis_x_tick_rotate) / 180);
+        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);
 };