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/
Comments
Post a Comment