I used percetange instead.


Check this jfiddle


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

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!

Related Query

More Query from same tag