How to set Highcharts xAxis position on the yAxis

2019-08-07 02:16发布

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

Wanted chart

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

1条回答
Root(大扎)
2楼-- · 2019-08-07 02:51

Answers for you:

  1. Yes, this is possible by using Highcharts plugin for that.

  2. This is not supported, you can use chart.events.load to loop over all labels in xAxis and update their position according to value in first series for respective category

查看更多
登录 后发表回答