x axis labels are stacking letters in tspans

[jkyoutsey]

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?!

<text y="9" x="0" transform="" style="text-anchor: middle; display: block;">
    <tspan x="0" dy=".71em" dx="0">J</tspan>
    <tspan x="0" dy="18" dx="0">A</tspan>
    <tspan x="0" dy="18" dx="0">N</tspan>
</text>

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
    }
  }
});

[ivarkallejarv]

Can you set x axis option multiline:false?

In your example: x: { type: 'category', categories: categories, tick: { fit: true, outer: false, multiline: false, } },