Highcharts: Auto-scale rendered shape along with chart?

Question

I've placed a box shape on the chart using chart.renderer.rect(). I want that box to get skinnier (the same way the chart does) when I resize the page horizontally.

I can see in the inspector that the width attribute of all the SVG chart elements is getting changed as I resize the page but not my rendered box shape. How are they doing this? Is there some property I have to add to my rendered box shape?

I also noticed the add() method takes a parent but I can't figure out how to get the SVGElement from the chart I'm adding it to and I'm not sure setting the parent would give me the auto-scaling I want anyway.

Answer 1

You can store reference to an element and edit it's attributes, for example based on axis values. Example:

chart: {
    events: {
        render: function() {
            const chart = this;
            const xAxis = chart.xAxis[0];
            const yAxis = chart.yAxis[0];
            const startX = xAxis.toPixels(1);
            const startY = yAxis.toPixels(7);
            const width = xAxis.toPixels(6) - startX;
            const height = yAxis.toPixels(4) - startY;

            if (!chart.customRect) {
                chart.customRect = chart.renderer.rect().attr({
                    'stroke-width': 2,
                    stroke: 'red',
                    fill: 'yellow'
                }).add();
            }

            chart.customRect.attr({
                x: startX,
                y: startY,
                width,
                height
            });
        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/p6743jam/

API Reference:

https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr

https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels