Change chart size based on tick size

src/axis.js

@@ -39,7 +39,7 @@ c3_chart_internal_fn.getXAxis = function (scale, orient, tickFormat, tickValues,
             tickWidth: config.axis_x_tick_width,
             withoutTransition: withoutTransition,
         },
-        axis = c3_axis($$.d3, axisParams).scale(scale).orient(orient);
+        axis = c3_axis($$.d3, axisParams, $$).scale(scale).orient(orient);
 
     if ($$.isTimeSeries() && tickValues) {
         tickValues = tickValues.map(function (v) { return $$.parseDate(v); });
@@ -79,7 +79,7 @@ c3_chart_internal_fn.updateXAxisTickValues = function (targets, axis) {
 };
 c3_chart_internal_fn.getYAxis = function (scale, orient, tickFormat, tickValues, withOuterTick) {
     var axisParams = {withOuterTick: withOuterTick},
-        axis = c3_axis(this.d3, axisParams).scale(scale).orient(orient).tickFormat(tickFormat);
+        axis = c3_axis(this.d3, axisParams, this).scale(scale).orient(orient).tickFormat(tickFormat);
     if (this.isTimeSeriesY()) {
         axis.ticks(this.d3.time[this.config.axis_y_tick_time_value], this.config.axis_y_tick_time_interval);
     } else {
@@ -279,7 +279,8 @@ c3_chart_internal_fn.rotateTickText = function (axis, transition, rotate) {
 };
 
 c3_chart_internal_fn.getMaxTickWidth = function () {
-    return 10;
+    return (this.config.maxTickTextWidth || this.config.default_tick_width) +
+           (this.config.tick_text_padding || 0);
 };
 
 c3_chart_internal_fn.updateAxisLabels = function (withTransition) {

src/c3.axis.js

@@ -3,7 +3,8 @@
 // 2. ceil values of translate/x/y to int for half pixel antialiasing
 // 3. multiline tick text
 var tickTextCharSize;
-function c3_axis(d3, params) {
+// $$ is passed to save max tick width in $$.config
+function c3_axis(d3, params, $$) {
     var scale = d3.scale.linear(), orient = "bottom", innerTickSize = 6, outerTickSize, tickPadding = 3, tickValues = null, tickFormat, tickArguments;
 
     var tickOffset = 0, tickCulling = true, tickCentered;
@@ -158,6 +159,29 @@ function c3_axis(d3, params) {
                 var tickPosition = scale(d) + (tickCentered ? 0 : tickOffset);
                 return range[0] < tickPosition && tickPosition < range[1] ? innerTickSize : 0;
             }
+            
+            // Seek a specific value in the stylesheets of a document
+            function getStyleValue(selector, property) {
+                var css, rule, sheet, value;
+                for (var styleId = 0; styleId < document.styleSheets.length; styleId++) {
+                    sheet = document.styleSheets[styleId];
+                    for (var ruleId = 0; ruleId < sheet.cssRules.length; ruleId++) {
+                        rule = sheet.cssRules[ruleId];
+                        css = rule.cssText;
+                        if (css.indexOf(selector) !== -1) {
+                            if (css.indexOf(property) !== -1) {
+                                try {
+                                    value = css.split(property)[1].split(':')[1].split(';')[0];
+                                    return value.trim();
+                                } catch (e) {
+                                    // Error will be caught in case of incorrect CSS
+                                    return undefined;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
 
             text = tick.select("text");
             tspan = text.selectAll('tspan')
@@ -165,12 +189,24 @@ function c3_axis(d3, params) {
                     var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [].concat(textFormatted(d));
                     counts[i] = splitted.length;
                     return splitted.map(function (s) {
-                        return { index: i, splitted: s };
+                        return { index: i, splitted: String(s) };
                     });
                 });
             tspan.enter().append('tspan');
             tspan.exit().remove();
-            tspan.text(function (d) { return d.splitted; });
+
+            var fontSize;
+                
+            tspan.text(function (d) {
+                fontSize = parseFloat(getStyleValue('.c3-axis-y .tick', 'font-size'));
+                if (d.splitted.length) {
+                    $$.config.maxTickTextWidth = Math.max(
+                        $$.config.maxTickTextWidth || 0,
+                        d.splitted.length * fontSize / $$.config.tick_text_h_to_w
+                    );
+                }
+                return d.splitted;
+            });
 
             switch (orient) {
             case "bottom":

src/config.js

@@ -194,6 +194,11 @@ c3_chart_internal_fn.getDefaultConfig = function () {
         tooltip_init_show: false,
         tooltip_init_x: 0,
         tooltip_init_position: {top: '0px', left: '50px'},
+        // default additional tick padding
+        tick_text_padding: 0,
+        tick_text_h_to_w: 1.76,
+        // used when size is not available yet
+        default_tick_width: 30,
         // caching
         shouldCache: true
     };