Responsive Highcharts - Plot text Centered

Author Ben Clayton

HTML

<script src="//code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 100%;width: 100%"></div>

The text is plotted over the graph when the chart 'on_complete' function runs. The text is centered using maths by looking at all the chart properties like width and height. The plotarea is a sub region of the chart and as it is normally a little offset to the right, therefor you will need different maths for centering the within plotarea. <br/>
Here are some examples of how to various positioning.<br/><br/>
ex1) Text 'chart centered' 100px down from top of chart.<br/>
<pre>
    var x = (chart.chartWidth  * 0.5) - (textBBox.width * 0.5);<br/>
    var y = 100;<br/>
</pre>
ex2) Text 'chart centered' 100px up from bottom.<br/>
<pre>
    var x = (chart.chartWidth  * 0.5) - (textBBox.width * 0.5);<br/>
    var y = chart.chartHeight - (100 + textBBox.height);<br/>
</pre>
ex3) Text 'chart centered' 10% down from top.<br/>
<pre>
    var x = (chart.chartWidth  * 0.5) - (textBBox.width * 0.5);<br/>
    var y = chart.chartHeight * 0.1;<br/>
</pre>

JavaScript

$(function () {
    $('#container').highcharts({
        // add resize event handler
        chart:{events:{resize:function(){this.__resizefn()}}},

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]

    }, function (chart) { // on complete
        // add function to chart object which we can call to draw the extra text
        // Note: function name is made obscure to avoid clashing with existing functions.
        debugger;
        chart.__resizefn = function(){
            // Remove old text if doing a redraw
            $('#xtratext').remove();
            // Make Text object, with font and color.
            var texto = chart.renderer.text("Hello World").css({
                    color: '#DE4040',
                    fontSize: '26px'  
                }).add();
            // Get Text bounding box to use it's dimensions
            var textBBox = texto.getBBox();
            //console.log(textBBox);
            // Plotarea centering
            var x = chart.plotLeft + (chart.plotWidth  * 0.8) - (textBBox.width * 0.5);
            var y = chart.plotTop  + (chart.plotHeight * 0.1) - (textBBox.height * 0.5);
            // Chartarea centering
            //var x = (chart.chartWidth  * 0.5) - (textBBox.width * 0.5);
            //var y = (chart.chartHeight * 0.5) - (textBBox.height * 0.5);

            // position the text, and add an id so it can be removed before replotting which occurs on resize
            texto.attr({x: x, y: y, id:'xtratext'});
         }
        
        chart.__resizefn();
    });
    
    $(window).resize(function(){
        var chart = $('#container').highcharts();
//        if(chart.__tid) clearTimout(chart.tid);
//        chart.__tid=setTimeout(function(){
//            chart.__tid=null;
            // tell graph to...