x axis labels are stacking letters in tspans

Legend is at the right. Labels are simple JAN, FEB, MAR, ... But the x axis labels are stacked as three tspan's that each have one letter?!


J
A
N

In CSS I'm changing the font size/family/color of the tick labels. But generation of tspan has to be coming from the library.

Chart config:

const categories: string[] = (this.parentNativeElement.offsetWidth < 555) ?
['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'] :
['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

const chart = c3.generate({
bindto: this.chart.nativeElement,
data: {
columns: [
['MARKETPLACE AVERAGE', ...this.spendData.marketAverage],
['YOUR HISTORICAL DATA', ...this.spendData.historicalSpend],
['YOUR SPEND', ...this.spendData.currentSpend]
]
},
legend: {
position: 'right'
},
color: {
// gray, yellow, green
pattern: ['#EEEEEE', '#C8E586', '#ABC278']
},
axis: {
x: {
type: 'category',
categories: categories,
tick: {
fit: true,
outer: false
}
},
y: {
tick: {
format: (d) => {
return parseInt(d, 10) + '%';
},
outer: false
}
}
},
grid: {
y: {
show: true
}
}
});