Highcharts renderer doesnt scale

Question

I've created this highchart but I need the renderer.text to scale with the parent highchart. For example. In the second chart i changed the max and min width so that the chart scales within the min and max values but the render.text stays static. I want to make the 2nd fiddle look like the 1st fiddle whenever the user changes width. Thank you for your help.

http://jsfiddle.net/jimbob25/V446C/

http://jsfiddle.net/jimbob25/V446C/1/

renderer.path(['M', 485, 40, 'L', 505, 40, 505,300, 485, 300])
    .attr({
        'stroke-width': 1,
        stroke: 'red',
        zIndex: 3
    })
    .add();

renderer.text('+/-2%', 435,93)
    .attr({
        zIndex: 3
    })
    .css({
        color: '#000000',
        fontSize: '12px'
    })
    .add();

Answer 1

In the second fiddle you had set the height:400px; width:530px; so you had fix the values and chart wont scale therefore you should set min-width and min-height you also can set max-width and max-height.
Here is the fiddle

Answer 2

Osyan thank you for the help but what i meant was the renderer text doesnt scale with the image. I ended up drawing my renderer to work for 530px width, then anytime the hgihchart resizes i get the offset and redraw the images with that offset

redraw: function() {
                    var offset = 530 - chart.chartWidth;
                    initDrawing(chart,offset);
                }

and then

function initDrawing(chart,offset){
      $("#alert1").remove();
      $("#greenArrow1").remove();
         //Clear all of the old elements by id because we will redraw new ones.

    // subtract the offset and add to chart
    renderer.text('+/-2%', 435-offset, 40)
        .attr({
            id: 'alert1'
    })
        .css({
        color: '#000000',
        fontSize: '12px'
    })
        .add();