score:1

Accepted answer

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


Related Query

More Query from same tag