Highcharts legend is cutting off
<p>I am trying to plot a heatmap using highcharts api using the following chart options:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{
    chart : {
     renderTo : 'chartContainer',
     type : 'heatmap'
    },

    title : {
     text : "abcd"
    },

    xAxis : {
     categories : []//categories,
     tickWidth : 0,
     title : {
      text : "Months"
     },
    },

    yAxis : {
     categories : []//categories,
     lineWidth : 1,
     title : {
      text : "xyz"
     }
    },

    colorAxis : {
     min : minValue,
     max : maxValue,
     gridLineWidth : 2,
     marker : null,
     tickWidth : 0,
     tickInterval : tickInterval
    },

    legend : {
     align : 'right',
     layout : 'vertical',
     verticalAlign: 'middle',
     symbolHeight : 250
    },

    tooltip : {
     enabled : false
    },

    navigation : {
     buttonOptions : {
      verticalAlign : 'top',
      y : -10
     }
    },

    series : [] //series data
};</code></pre>
</div>
</div>
</p>

<p>But legend is somehow cutting at the top. Please check the following snapshot:
<a href="http://i.stack.imgur.com/ni1Nx.png" rel="nofollow">Chart Screenshot</a></p>

<p>I tried the different combinations of legend options mentioned in <a href="http://api.highcharts.com/highcharts#legend" rel="nofollow">http://api.highcharts.com/highcharts#legend</a>
Also, tried increasing the height of the chart container. 
Still, the legend is still cutting at the top. 
Any help/suggestions?</p>