Highcharts - Pie chart does not display slices - charts

Question

Odd one. I'm calling my pie chart, and when I do the grey background, data pipe connectors, and hover data with the numbers all show fine on the background. But no pie slices will show.
However, if I print out the chart, it shows the slices after I save the chart and go back to the page. Or, if I inspect element in Chrome, it will show the chart after I resize the inspector window. Almost like it's re-drawing the chart if I take any action, but not drawing it initially.
It works the same way in all browsers. No javascript errors are thrown.
Any ideas?
This is my code:
<script type="text/javascript">
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'pie1',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'application usage'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +'';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#FFFFFF',
connectorColor: '#FFFFFF',
formatter: function() {
return '<b>'+ this.point.name +'</b><br> '+ this.y +' ('+ Math.round(this.percentage) +'%)';
}
}
}
},
series: [{
type: 'pie',
name: 'percentage of application usage',
data: [{
name: 'Lessons', y: 25}, {name: 'Discussion', y: 65}, {name: 'Tests', y: 85}, {name: 'Dropbox', y: 92}, {name: 'Surveys', y: 105
}]
}]
});
});
</script>
<div id='pie1' class='chart_container'></div>