Jugal | Positioning Zoom buttons | Highchart & Highstock playground

Basic Skeleton Jugal Thakkar http://jugal.me/

HTML

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://code.jugal.me/js/jugalsLib.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.src.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/stock/modules/exporting.src.js"></script>
<div id="container"></div>

CSS

#container {
    min-width:500px;
}

JavaScript

var orgHighchartsRangeSelectorPrototypeRender = Highcharts.RangeSelector.prototype.render;
Highcharts.RangeSelector.prototype.render = (function(func) {
    return function(){
        func.apply(this, arguments);
        var leftPosition = this.chart.plotLeft,
            topPosition = this.chart.plotTop+5,
            space = 2;
        this.zoomText.attr({
            x: leftPosition,
            y: topPosition + 15
        });
        leftPosition += this.zoomText.getBBox().width;
        for (var i = 0; i < this.buttons.length; i++) {
            this.buttons[i].attr({
            		class: "container",
                x: leftPosition,
                y: topPosition 
            });
            leftPosition += this.buttons[i].width + space;
        }
    }
} (Highcharts.RangeSelector.prototype.render));    

var chartingOptions = {

};

chartingOptions = $.extend({}, jugalsLib.getBasicChartOptions(), chartingOptions);

var chart = new Highcharts.StockChart(chartingOptions);