Как выровнять сплошную колею с помощью Highcharts по размеру родительского div

Question

Я создал диаграмму Solid Gauge, используя Highcharts.Теперь я хочу разместить диаграмму внутри сетки, которая принимает размер 300 пикселей или автоматически.Когда я пытаюсь поместить код в div, он занимает много пустого пространства вверх и вниз по диаграмме. Я попытался проверить его, и это показывает, что SVG-изображение занимает большую часть пространства.Я не понимаю, как привести диаграмму в соответствие с div. Я новичок в HighCharts, любая помощь будет признательна.

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

В настоящее время изображение идет таким образом.

http://jsfiddle.net/dt4wu39e/1/