Highcharts yAxes resizing
HTML
<div id="container" style="height: 500px; min-width: 600px"></div>
<script type="text/javascript" src="http://code.highcharts.com/stock/highstock.js"></script>
<script type="text/javascript" src="http://highcharts.com/samples/data/usdeur.js"></script>
JavaScript
$(function() {
window.chart = new Highcharts.StockChart({
chart: {
renderTo: 'container',
animation: false,
events: {
load: function(){
var c = this,
r = c.renderer,
axis = c.yAxis,
top = axis[1].top,
drag = false,
sy, h0, h1, t1;
var handle = r.rect(c.chartWidth/2 - 50, top-30, 100, 8, 2)
.attr({
stroke: '#999',
strokeWidth: 1,
fill: '#ddd'
})
.on('mousedown', function(e){
sy = e.clientY;
h0 = axis[0].options.height;
h1 = axis[1].options.height;
t1 = axis[1].options.top;
$(c.container).bind('mousemove', resize);
$(c.container).bind('mouseup', function(){
$(c.container).unbind('mousemove mouseup');
});
})
.add();
function resize(e){
axis[0].options.height = h0 - sy + e.clientY;
axis[1].options.height = h1 + sy - e.clientY;
axis[1].options.top = t1 - sy + e.clientY;
c.series[0].hide(false);
c.series[1].hide(false);
c.series[0].show(false);
c.series[1].show(true);
handle.translate(0, e.clientY - sy);
}
}
}
},
rangeSelector: {
...