Highcharts dataLabel проблема позиционирования в FF и IE

Question

Я пытаюсь найти, как расположить метки внутри баров в этом случае.

<script src="http://code.highcharts.com/highcharts.js"></script> 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"> 
</div> 
$(function() { 
$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Stacked bar chart' 
    }, 
    subtitle: { text: 'Some syubtext' }, 
    xAxis: [{ categories: ['2009','2010','2011','2012','2013'] }], 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Total fruit consumption' 
     } 
    }, 
    legend: { 
     reversed: true 
    }, 
    plotOptions: { 
     bar: { stacking: 'percent', 
       dataLabels: { 
        enabled: true, 
        color: 'white' 
       } 
      } 
    }, 
    series: [{ 
     name: 'John', 
     data: [28, 23.6, 19.4, 17.5, 22] 
    }, { 
     name: 'Jane', 
     data: [56.7, 60.4, 64, 64.8, 60] 
    }, { 
     name: 'Joe', 
     data: [15.3, 15.9, 16.6, 17.7, 18] 
    }] 
}); 

});

js fiddle

Это работает на Chrome, но FF и IE смещает метки данных. Пожалуйста, совет.

Answer 1

добавив VerticalAlign: 'сверху' устраняет проблему

dataLabels: { 
    enabled: true, 
    color: 'white', 
    verticalAlign: 'top' 
} 

скрипку дополненного http://jsfiddle.net/cbf74c1d/2/