How to align solid gauge using Highcharts to the size of parent div - css

Question

I have created a Solid Gauge chart using Highcharts. Now, I want to fit the chart inside a grid div which takes size of 300px or auto. When I try to put the code inside the div, it takes a lot of white space up and down of the chart.I tried to inspect it and it is showing that the SVG image is taking most of the space. I don't understand how to make the chart fit in the div.I am new to HighCharts, any help would be appreciated.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container" style="height: 300px;">
</div>
$(function() {
var rawData = 100,
data = getData(rawData);
function getData(rawData) {
var data = [],
start = Math.round(Math.floor(rawData / 10) * 10);
data.push(rawData);
for (i = start; i > 0; i -= 1) {
data.push({
y: i
});
}
return data;
}
Highcharts.chart('container', {
chart: {
type: 'solidgauge',
marginTop: 0
},
title: {
text: ''
},
subtitle: {
text: rawData,
style: {
'font-size': '60px'
},
y: 200,
},
tooltip: {
enabled: false
},
pane: [{
startAngle: -90,
endAngle: 90,
background: [{ // Track for Move
outerRadius: '100%',
innerRadius: '70%',
backgroundColor: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.1).get(),
borderWidth: 0,
shape: 'arc'
}],
size: '100%',
center: ['50%', '65%']
}, {
startAngle: -180,
endAngle: 180,
size: '95%',
center: ['50%', '65%'],
background: []
}],
yAxis: [{
min: 0,
max: 100,
lineWidth: 0,
lineColor: 'white',
tickInterval: 0,
labels: {
enabled: true
},
minorTickWidth: 0,
tickLength: 0,
tickWidth: 0,
tickColor: 'white',
zIndex: 0,
stops: [
[0, '#fff'],
[0.1, '#0f0'],
[0.2, '#2d0'],
[0.3, '#4b0'],
[0.4, '#690'],
[0.5, '#870'],
[0.6, '#a50'],
[0.7, '#c30'],
[0.8, '#e10'],
[0.9, '#f03'],
[1, '#f06']
]
}, {
linkedTo: 0,
pane: 0,
lineWidth: 10,
lineColor: 'white',
tickPositions: [],
zIndex: 6
}],
series: [{
animation: false,
dataLabels: {
enabled: false
},
borderWidth: 0,
color: Highcharts.getOptions().colors[0],
radius: '100%',
innerRadius: '70%',
data: data
}]
});
});
Currently the image is coming this way.
http://jsfiddle.net/dt4wu39e/1/