Highstock (Highchart) 1.3.1 ведет себя ошибочно, когда легенда выровнена вправо

Question

В highstock 1.3.1, когда легенда выровнена вправо, область, используемая для рисования диаграммы, перекрывается с областью, используемой селектором диапазона. В результате щелчок мышью и перетаскивание события, предназначенные для перемещения селектора диапазона, запускают событие масштабирования области диаграммы. Но если легенда выровнена по умолчанию, диаграмма ведет себя правильно. Демо: http://jsfiddle.net/msjaiswal/eexBp/3/

Код для вышеприведенной скрипки:

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' 
     }] 
    }); 
}); 

Answer 1

Я думаю, что вы хотите установить verticalAlign:middle см : http://jsfiddle.net/eexBp/4/