I would like to have my xAxis not below my chart but in the middle (on the yAxis zero value).

And I would like also to have the xAxis labels :

• above the xAxis when it is a negavite value


• below the xAxis when it is a positive value

Here is what I have : jsFiddle

$(function () {

    $('#container').highcharts({

        xAxis: {

                    showFirstLabel : true,

                    showLastLabel : true,

                    type : category,

                    tickLength : 0,

                    lineWidth : 2

            },



        series: [{

            data: [

                {name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}

            ],

            type : 'column'

        }]

    });

});

• Does it exist an easy way to do this ?


• If not, how to do this ?

Thanks.

Solution :

Thanks to Pawel Fus (thanks, thanks, thanks), here is the solution for my problem : jsFiddle.

$(function () {

    $('#container').highcharts({

        chart: {

            renderTo: 'container',

            type: 'column',

            events: {

                load: function () {

                                        var xAxis = this.xAxis[0];

                    var serie = this.series[0];



                    for (var current_tick in xAxis.ticks) {

                        var tick = xAxis.ticks[current_tick];



                        if(serie.data[current_tick]){

                            if (serie.data[current_tick].y > 0) {

                                tick.label.attr({

                                    y: tick.label.y + 18

                                });

                            }

                        }

                    }

                }

            }

        },

        xAxis: {

                    showFirstLabel : true,

                    showLastLabel : true,

                    type : category,

                    tickLength : 0,

                    crossing:0,

                    opposite:true,

                    lineWidth : 2

            },



        series: [{

            data: [

                {name : 'T1', y: 123},{name : 'T2', y: 152},{name : 'T3', y: -120},{name : 'T4', y: 0},{name : 'T5', y: 142},{name : 'T6', y: 212}

            ],

            type : 'column'

        }]

    });

});