Format X axis Label of Highcharts

Question

I have developed the Highcharts label as much as possible but not able to format as required

https://jsfiddle.net/5ug4wpbz/1/

Please tell me how to format the date and time as shown in the image attached with this.

Expected :

https://ibb.co/WV638L4

Answer 1

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/