RegressionFormula

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px; width: 400"></div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'container'
        },

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

        yAxis: {
            max: 300
        },

        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) {


        var g = chart.renderer.g().attr({
            //zIndex: 5
        }).add();
        var text = chart.renderer.text(
            'My Regression Formula',
        0,
        0).attr({
            //zIndex: 1
        }).add(g);

        var box = text.getBBox();
        var rect = chart.renderer.rect(box.x - 5, box.y - 5, box.width + 10, box.height + 10, 5)
            .attr({
            fill: '#FFFFEF',
            stroke: 'gray',
                'stroke-width': 1 //,
            //zIndex: 4
        })
            .add(g);
        text.toFront();
        
        //position the group
        box = g.getBBox(rect);

     
        
        
        //position top-left
        //g.translate(chart.plotLeft + 5, chart.plotTop + box.height);
       //position top-right
       g.translate(chart.plotLeft + chart.plotWidth - box.width , chart.plotTop +(box.height-5) );
         //position top-center
        //g.translate(chart.plotLeft + (chart.plotWidth - box.width)*0.5 , chart.plotTop + box.height);
        //position bottom-right
        //g.translate(chart.plotLeft + chart.plotWidth - box.width , chart.plotTop + chart.plotHeight-10); // wat is 10???
     

        /*        var point = chart.series[0].data[8];
        
        var text = chart.renderer.text(
                'Max', 
                point.plotX + chart.plotLeft + 10, 
                point.plotY + chart.plotTop - 10
            ).attr({
                zIndex: 5
            }).add();
        
        var box = text.getBBox();
       ...