Fix conflict and add spec

c3.js

@@ -6474,9 +6474,13 @@
 
                 // this should be called only when category axis
                 function splitTickText(d, maxWidth) {
-                    var tickText = textFormatted(d) + "",
+                    var tickText = textFormatted(d),
                         subtext, spaceIndex, textWidth, splitted = [];
 
+                    if (Object.prototype.toString.call(tickText) === "[object Array]") {
+                        return tickText;
+                    }
+
                     if (!maxWidth || maxWidth <= 0) {
                         maxWidth = isVertical ? 95 : params.isCategory ? (tickOffset * 2 - 10) : 110;
                     }
@@ -6500,7 +6504,7 @@
                         return splitted.concat(text);
                     }
 
-                    return split(splitted, tickText);
+                    return split(splitted, tickText + "");
                 }
 
                 function tspanDy(d, i) {
@@ -6523,7 +6527,7 @@
                 text = tick.select("text");
                 tspan = text.selectAll('tspan')
                     .data(function (d, i) {
-                        var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [textFormatted(d)];
+                        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 };

spec/axis-spec.js

@@ -435,6 +435,28 @@ describe('c3 chart axis', function () {
                 });
             });
         });
+
+        describe('with axis.x.tick.format', function () {
+
+            it('should update args to use axis.x.tick.format', function () {
+                args.axis.x.tick.format = function () {
+                    return ['this is a very long tick text', 'on category axis'];
+                };
+                expect(true).toBeTruthy();
+            });
+
+            it('should have multiline tick text', function () {
+                var tick = chart.internal.main.select('.c3-axis-x').select('g.tick'),
+                    tspans = tick.selectAll('tspan'),
+                    expectedTickTexts = ['this is a very long tick text', 'on category axis'];
+                expect(tspans.size()).toBe(2);
+                tspans.each(function (d, i) {
+                    var tspan = d3.select(this);
+                    expect(tspan.text()).toBe(expectedTickTexts[i]);
+                });
+            });
+
+        });
     });
 
     describe('axis.x.tick.rotate', function () {

src/c3.axis.js

@@ -103,9 +103,13 @@ function c3_axis(d3, params) {
 
             // this should be called only when category axis
             function splitTickText(d, maxWidth) {
-                var tickText = textFormatted(d) + "",
+                var tickText = textFormatted(d),
                     subtext, spaceIndex, textWidth, splitted = [];
 
+                if (Object.prototype.toString.call(tickText) === "[object Array]") {
+                    return tickText;
+                }
+
                 if (!maxWidth || maxWidth <= 0) {
                     maxWidth = isVertical ? 95 : params.isCategory ? (tickOffset * 2 - 10) : 110;
                 }
@@ -129,7 +133,7 @@ function c3_axis(d3, params) {
                     return splitted.concat(text);
                 }
 
-                return split(splitted, tickText);
+                return split(splitted, tickText + "");
             }
 
             function tspanDy(d, i) {
@@ -152,7 +156,7 @@ function c3_axis(d3, params) {
             text = tick.select("text");
             tspan = text.selectAll('tspan')
                 .data(function (d, i) {
-                    var splitted = params.tickMultiline ? splitTickText(d, params.tickWidth) : [textFormatted(d)];
+                    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 };