In highstock 1.3.1, when the legend is aligned to right, the area used to draw chart overlaps with area used by range selector. As a result the mouse click and drag event intended to move range selector triggers zoom event of chart area. But if the legend is aligned to default location, chart behaves correctly. Demo : http://jsfiddle.net/msjaiswal/eexBp/3/
Code for the 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 the range selectorin the two 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 the chart
$('#container').highcharts('StockChart', {
chart: {
type: 'line',
zoomType : 'x'
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to 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 to 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 the chart
$('#container2').highcharts('StockChart', {
chart: {
type: 'line',
zoomType : 'x'
},
rangeSelector: {
selected: 1
},
title: {
text: 'USD to EUR exchange rate'
},
legend: {
enabled: true,
layout: 'vertical',
//align: 'right',
//x: -10,
//y: -200,
borderWidth: 0
},
yAxis: {
title: {
text: 'Exchange rate'
}
},
series: [{
name: 'USD to 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'
}]
});
});