How to align centre a custom label in highcharts

See a jsfiddle example

 labels: {
        items : [{
            html : 'Center Me!',
            style : {
                left : '0px',
                top : '-15px',
      开发者_JAVA技巧          fontSize : '20px'
            }
        }]
    }

I am trying to align the custom label in the /labels/items JSON element to hang right under the title and subtitle.

Playing with firebug I can alter the SVG text element for the label and add text-align='middle' and change the x='' attribute to have the same value as the title's x attribute. This makes it perfectly align under the title and stay there when resized but I can't figure out how to make the highcharts library generate this source.

Maybe there is a better way to add another label under the subtitle?

Quick fix: Add this to you style

left: '160px'

If you wish, you could also add an HTML element after the chart has been generated to do this effect (see example at http://jsfiddle.net/brightmatrix/5517s8zb/1/).

In this case, to get the proper centered effect, you'll need to explicitly define the container div's width.

<div id="container" style="height: 400px; width: 100%"></div>

Here is the HTML element:

/* add an HTML element to the chart starting at 0px from the left corner and 
   10% of the container's height from the top */
chart.renderer.html('<div align="center" style="font-size: 20px; width: ' + 
$('#container').width() + 'px">Center Me!</div>',0,$('#container').height()*.1).add();

I did the 10% of the container's height to help make the position more flexible. You could also choose to add or subtract specific pixel dimensions until you get it placed where you like.

I hope this is helpful!

I used percetange instead.

           left:300%

Check this jfiddle http://jsfiddle.net/F2erm/146/