Можно ли нарисовать Highcharts PlotBand и / или PlotLines ниже / выше тика xAxis / top?

Question

Есть ли варианты, чтобы полоса / линия xAxis начиналась ниже самого xAxis и расширялась выше верхней части области диаграммы? Или наоборот остановка скажем посередине?

Answer 1

По умолчанию нет возможности уменьшить или увеличить высоту xAxis plotBands и plotLines, но с помощью Highcharts.SVGRenderer вы можете легко покрыть часть из них:

chart: {
    events: {
        load: function() {
            var x = this.plotLeft,
                y = this.plotTop,
                width = this.plotSizeX,
                height = 60;


            this.renderer.rect(x, y, width, height)
                .attr({
                    fill: '#fff',
                    zIndex: 0
                }).add()
        }
    }
}

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/7xwsa0tg/

или создать пользовательский plotBands:

chart: {
    events: {
        load: function() {
            var xAxis = this.xAxis[0],
                x = xAxis.toPixels(1),
                y = this.plotTop,
                width = xAxis.toPixels(3) - xAxis.toPixels(1),
                height = this.plotSizeY - 50;


            this.renderer.rect(x, y, width, height)
                .attr({
                    fill: 'green',
                    zIndex: 0
                }).add()
        }
    }
},

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/tmour721/

API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect