How to position axis label in highcharts

Question

I have the attached chart output.

How can I put the name of the axis exactly on the axis instead of positioning it between the axis (ie: N, E, S, W).

The JS code is given below:

window.chart = new Highcharts.Chart({

                    chart: {
                        renderTo: 'container2',
                        polar: true,
                        type: 'column'
                    },

                    title: {
                        text: '24-Hours Wind Speed and Direction Chart'
                    },

                    pane: {
                        startAngle: 0,
                        endAngle: 360,
                        size: '85%'
                    },
                    legend: {
                        reversed: true,
                        enabled: false,
                        align: 'right',
                        verticalAlign: 'top',
                        y: 100,
                        layout: 'vertical'
                    },
                    xAxis: {
                        type: "",
                        categories: sorted_names,           
                        labels: {
                            formatter: function () {
                                return this.value + '°';
                            }
                        }
                    },

                    yAxis: {
                        min: 0,
                        endOnTick: true,
                        showLastLabel: false
                    },

                    plotOptions: {
                        series: {
                        //   pointStart: 0,
                        //     pointInterval: 90
                       //   pointPlacement: 'between'
                        },
                        column: {
                            pointPadding: 0,
                            groupPadding: 0
                        }
                    },

                    series: series

                });

Is there anyone who can help me to fix this. Thanks in advance.

Answer 1

I believe you are looking for a combination of the tickMarkPlacement option and the pointPlacement option.

xAxis: {
    tickmarkPlacement: 'on', // add this!
    type: "",
    categories: sorted_names,           
    labels: {
        formatter: function () {
            return this.value + '°';
        }
    }
},

And in the plot options:

plotOptions: {
   series: {
       pointPlacement: 'on' // add this !
   },
   column: {
       pointPadding: 0,
       groupPadding: 0
   }
},

Here's a fiddle demonstration.