score:2

Accepted answer

It feels more like a hack than a genuine solution, but I have come up with a workaround that solves my issue for now, I have the function below:

var labelBackground = null;
function labelDrawBack(crt) {
    if ( isIntraDay ) {
        var textbox = crt.yAxis[ 0 ].plotLinesAndBands[ 0 ].label;
        if ( !!labelBackground ) {
            labelBackground.attr({ y: textbox.y - 10 });
        } else {
            var box = textbox.getBBox();
            labelBackground = crt.renderer.rect( box.x - 3, box.y + 1, box.width + 6, box.height, 3 ).attr( {
                fill: '#fff',
                id: 'labelBack',
                opacity: .65,
                'stroke-width': 0,
                zIndex: 4
            }).add();
        }
    }
}

I make sure this function is executed immediately after the chart is initialized and additionally I attach the function to the chart object that is returned from the StockChart call:

var chartObj = new Highcharts.StockChart( chartConfig, function ( crt ) {
        labelDrawBack( crt );
} );
chartObj.labelDraw = labelDrawBack;

And in the chart options I have added this to the chart.redraw event:

events: {
    redraw: function() {
        this.labelDraw(this);
    }
}

This works as intended, moving the transparent background with the label (which is moved vertically when the chart is resized). The reason I have redirected the call in the chart redraw event is that the labelDrawBack function is defined in another function than the one where my chart options are defined, thus the labelDrawBack function is out of scope there.


Related Articles