score:1

Accepted answer

You can not use category and datetime axis type together, these are two mutually exclusive values. However, you can achieve the wanted result by using one of them.

For category axis type set pointPlacement to 'between' and xAxis.labels.align to 'left':

xAxis: {
    categories: [...],
    labels: {
        align: 'left'
    }
},
series: [{
    pointPlacement: 'between',
    data: [...]
}]

Live demo: https://jsfiddle.net/BlackLabel/fnsuxt90/


For datetime axis type, you need to use x and y data values or set pointStart and pointInterval properties:

xAxis: {
    type: 'datetime'
},
series: [{
    pointStart: 1563040800,
    pointInterval: 1000 * 60 * 30,
    data: [...]
}]

Live demo: https://jsfiddle.net/BlackLabel/f1c59a0w/


API Reference:

https://api.highcharts.com/highcharts/series.line.label

https://api.highcharts.com/highcharts/series.line.pointPlacement

https://api.highcharts.com/highcharts/series.line.type


EDIT:

To split the label into two lines, inset <br> tag to a string in labels.formatter function:

xAxis: {
    ...,
    labels: {
        formatter: function() {
            return this.value.split(' ').join('<br>')
        }
    }
}

Live demo: https://jsfiddle.net/BlackLabel/vgp46bhw/


Related Query

More Query from same tag