Highcharts write xaxis values on 2 different lines

Question

I am using the following for the x axis:

 xAxis: {
                        type: 'datetime',
                        tickInterval: 3600 * 1000, // one hour
                        tickWidth: 0,
                        gridLineWidth: 1,
                        gridLineColor: '<?php echo($gridlinecolor); ?>',
                        labels: {
                            align: 'center',
                            x: -3,
                            y: 20,
                            formatter: function() {
                                return Highcharts.dateFormat('%d-%m', this.value) + ' / '  + Highcharts.dateFormat('%l%p', this.value);
                            }
                        }
                    }

Which gives me things like 13-02 / 4PM.

I would like to have this with a new line like 13-02 4PM

How can I achieve this?

Thanks,

John.

Answer 1

You can use the html <br/>:

formatter: function() {
    return Highcharts.dateFormat('%d-%m', this.value) + '<br/>'  + Highcharts.dateFormat('%l%p', this.value);
}

Example fiddle here.

See the section here on HTML in Highcharts.