HighCharts dynamically resize renderer label or element

Question

I need to add extensive footnotes to my charts and they must export with svg so I cannot simply put them in the surrounding HTML.

I have tried several strategies and I can position it, wrap text, manipulate the size of the chart to make space etc.

The intent is to make them responsive. The problem is I cant find how to update the size of the container that holds this text either using using events and renderer elements or using chart.labels

In this fiddle (among other things): I am attempting to create a new label with every redraw but I cannot find how to address and destroy the label I am creating with the onload

http://jsfiddle.net/alex_at_pew/qswnw4wz/2/

$(function () {
function foo() { var width = $(this.container).width()-250; return width;}
var footnote_text = 'This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing This text will adjust to chart resizing ';
$('#container').highcharts({

    chart: {
        events: {


            load: function () {
                var label = this.renderer.label(footnote_text, //str
                        10, //x
                        200,//y
                        'rect',//shape
                        1,//anchorX
                        1,//anchorY
                        1,//useHTML
                        1,//baseline
                        'deletme'//className
                    )
                    .css({
                    width: foo() + 'px'

                }).add();

            },
            redraw: function () {
            $('.highcharts-deletme').remove();
               console.log('chart');
                var label = this.renderer.label(footnote_text, //str
                        10, //x
                        200,//y
                        'rect',//shape
                        1,//anchorX
                        1,//anchorY
                        1,//useHTML
                        1,//baseline
                        'deletme'//className
                    )
                    .css({
                    width: foo() + 'px'

                }).add();
            }
        }
    },
    labels: {

        items: [{
            html:  foo()+footnote_text
        }],
        style: {
            left: '100px',
            top: '100px',
            color: 'red',
            width: foo()
        }
    },series: [{
       data: [29.9, 71.5]     
       }]

    });
});

Answer 1

Another (and general) solution is to store generated label in a variable:

var myLabel; // define label
$('#container').highcharts({
    chart: {
       events: {
          load: function () {
              myLabel = this.renderer.label( ... ).add();
          },
          redraw: function () {
              if(myLabel) {
                    myLabel.destroy();
              }
              myLabel = this.renderer.label( ... ).add();
          }
       }
    }
});

It will be faster, than using jQuery to find items by classes.