Serial chart category axis: Achive line break for date labels

[veitbjarsch]

Hi together, I need some information about the category axis. If I use the category axis with plain strings, I can use the labelFunction in that way:

labelFunction: function (value, data, categoryAxis) { return moment(value).locale('de').format('MMM<br>YYYY'); },

The result will be a line break between month and Year

Unfortunately if I use this label function in the date context:

parseDates: true, labelFunction: function (value, date, categoryAxis) { return moment(date).locale('de').format('MMM<br>YYYY'); },

The date will be parsed but the line break "<br>" will printed as a string (Jan<br>1999).

How can I achive to use the advanteges of a date category axes in combination with label line breaks.

Hope somebody can help me.

[amcharts]

New comment from Zendesk by Anthony Piris on ticket 38786. (replying here will automatically notify amCharts support agent)

Hi there,

Labels don't support HTML, so you need to use a newline instead. moment requires that you escape newlines with [] so your labelFunction should look like this.

    labelFunction: function(value, date, categoryAxis) {
      return moment(date).locale("de").format("MMM[\n]YYYY");
    }

Demo: https://codepen.io/team/amcharts/pen/9dd18dca621c815f1c7f0cac181bbc3f?editors=0010

I hope this helps.

Best,

Anthony Piris amCharts

[veitbjarsch]

Awesome. I'll have a look into it tomorrow. Thanks for your advice.

I don't know why but somehow the labelFunction supports the html tagon non date values. That was the reason why I was suprised, that it dosn't work on date values.

[amcharts]

New comment from Zendesk by Anthony Piris on ticket 38786. (replying here will automatically notify amCharts support agent)

Gotcha.

Yeah, I'm seeing this as well. Labels are SVG <text> nodes so <br> tags don't work directly. We typically convert <br> tags behind the scenes when static labels are involved (i.e. using labelText and not labelFunction). I'm not sure why this conversion is happening in a non date-based category axis label function, but general rule of thumb is to always use newlines for labels. Balloons are the only instance where HTML is supported directly.

Best,

Anthony Piris amCharts