[Solved]-Highcharts Spider Web Label overlap (Top and Bottom)-Highcharts

I too was facing the same problem.I solved it using 'useHTML' and some javascript of my own. Below is the code.

xAxis: {
    categories: [],
    tickmarkPlacement: 'on',
    lineWidth: 0,

    labels: {
        useHTML: false,
        style: {
            width: '240px'
        }
                ,
        formatter: function () {
            if ('Is an ideal holiday destination' === this.value) {
                 return '<span id="spn_itisideal"><span style="">' + this.value + '</span>';

            }
            else if ('Is a modern and trendy place' === this.value) {
                return '<span id="spn_isamodern"><span style="">' + this.value + '</tspan>';
            }
            else if ('Is a popular destination' === this.value)
            { return '<span id="spn_isapopular"><span style="">' + this.value + '</span>'; }
            else if ('Has great infrastructure' === this.value)
            { return '<span id="spn_hasgreatinfrastructure"><span style="">' + this.value + '</span>'; }
            else {
                return this.value;
            }
        }
    }
},

when you set useHTML to true,the x-axis labels are rendered as html.I pick those labels that are overlapping in the formatter function and wrap them up with an span with respective id. after my chart is loaded i use a javascript function to call these spans and adjust them according to my will.

function alterWebChart() {//Adjust x-axis label span.
    $('#spn_itisideal').parent().css('left', '268.273px');
    $('#spn_isamodern').parent().css('left', '479.727px');
    $('#spn_isapopular').parent().css('left', '260.526px');
    $('#spn_hasgreatinfrastructure').parent().css('left', '510.974px');
}