Highstock (Highchart) 1.3.1 behaves erroneously when legend is aligned to right -

in highstock 1.3.1, when legend aligned right, area used draw chart overlaps area used range selector. result mouse click , drag event intended move range selector triggers zoom event of chart area. if legend aligned default location, chart behaves correctly. demo : http://jsfiddle.net/msjaiswal/eexbp/3/

code above fiddle :

html:

<script src="http://code.highcharts.com/stock/highstock.js"></script> <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> try using range selectorin 2 charts below.<br> <b>erroneous behavior:</b> <div id="container" style="height: 500px; min-width: 500px"></div> <b>correct behavior:</b> <div id="container2" style="height: 500px; min-width: 500px"></div> 

javascript :

$(function() { $.getjson('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {      // create chart     $('#container').highcharts('stockchart', {         chart: {             type: 'line',             zoomtype : 'x'         },          rangeselector: {             selected: 1         },          title: {             text: 'usd eur exchange rate'         },         legend: {             enabled: true,             layout: 'vertical',             align: 'right',             //      verticalalign: 'top',             x: -10,             y: -200,             borderwidth: 0         },          yaxis: {             title: {                 text: 'exchange rate'             }         },          series: [{             name: 'usd eur',             data: data,             id: 'dataseries',             tooltip: {                 valuedecimals: 4             }         }, {             type: 'flags',             name: 'flags on series',             data: [{                 x: date.utc(2011, 1, 14),                 title: 'on series'             }, {                 x: date.utc(2011, 3, 28),                 title: 'on series'             }],             onseries: 'dataseries',             shape: 'squarepin'         }, {             type: 'flags',             name: 'flags on axis',             data: [{                 x: date.utc(2011, 2, 1),                 title: 'on axis'             }, {                 x: date.utc(2011, 3, 1),                 title: 'on axis'             }],             shape: 'squarepin'         }]     }); });    $.getjson('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {      // create chart     $('#container2').highcharts('stockchart', {         chart: {             type: 'line',             zoomtype : 'x'         },          rangeselector: {             selected: 1         },          title: {             text: 'usd eur exchange rate'         },         legend: {             enabled: true,             layout: 'vertical',             //align: 'right',             //x: -10,             //y: -200,             borderwidth: 0         },          yaxis: {             title: {                 text: 'exchange rate'             }         },          series: [{             name: 'usd eur',             data: data,             id: 'dataseries',             tooltip: {                 valuedecimals: 4             }         }, {             type: 'flags',             name: 'flags on series',             data: [{                 x: date.utc(2011, 1, 14),                 title: 'on series'             }, {                 x: date.utc(2011, 3, 28),                 title: 'on series'             }],             onseries: 'dataseries',             shape: 'squarepin'         }, {             type: 'flags',             name: 'flags on axis',             data: [{                 x: date.utc(2011, 2, 1),                 title: 'on axis'             }, {                 x: date.utc(2011, 3, 1),                 title: 'on axis'             }],             shape: 'squarepin'         }]     }); }); 

i think want set verticalalign:middle, see: http://jsfiddle.net/eexbp/4/