Add background box to y-axis in highcharts

Question

I am trying to create a background rectangle box to the y-axis in highcharts heat map. right now it is working for x-axis and i want the same for yaxis as well.I have tried chart.renderer.rect() but not sure where to use it properly. Thanks in advance.

$(function () {
    var categoryLinks = {
        'Foo': 'http://www.google.com/search?q=foo',
            'Bar': 'http://www.google.com/search?q=foo+bar',
            'Foobar': 'http://www.google.com/serach?q=foobar'
    };

    $('#container').highcharts({
        chart: {
            events: {
                load: function () {
                    var chart = this,
                        xAxis = chart.xAxis[0],
                        yAxis = chart.yAxis[0],
                        top = chart.plotTop + yAxis.height,
                        height = 20,
                        options = {
                            fill: 'rgba(50, 50, 150, 0.5)'
                        },
                        // colorize from 2 to 8
                        start_2 = xAxis.toPixels(2),
                        end_8 = xAxis.toPixels(8),
                        // colorize from 9 to 16
                        start_9 = xAxis.toPixels(9),
                        end_16 = xAxis.toPixels(16);
                    
                    var rect1 = chart.renderer.rect(
                        start_2, 
                        top, 
                        end_8 - start_2, 
                        height
                    ).attr(options).add(); 
                    
                    var rect2 = chart.renderer.rect(
                        start_9, 
                        top, 
                        end_16 - start_9, 
                        height
                    ).attr(options).add(); 
                    
                }
            }
        },


        xAxis: {
            tickInterval: 2  
        },
        series: [{
            data: [29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 106.4, 29.9, 71.5, 29.9]
        }]
    });
});

.hc-label {
    background-color: red;
    padding: 0px 5px;
    color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>

Answer 1

You only need to use the correct values:

$('#container').highcharts({
    chart: {
        events: {
            load: function () {
                ...,
                    startY40 = yAxis.toPixels(40),
                    endY60 = yAxis.toPixels(60);
                ...

                var rect3 = chart.renderer.rect(
                    yAxis.left - height, 
                    endY60, 
                    height,
                    startY40 - endY60, 
                ).attr(options).add();

            }
        }
    },
...
});

---

Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4770/