Accepted answer

I'm not sure how useful is that kind of graph, but you can set tickInterval, for example:


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');

Related Query

More Query from same tag