title: Highcharts: Dynamically size a solid gauge chart
body: <p>I would like a solid gauge chart that adequately fills it's container. The only way to do this is to give it a size of over 100%.</p>
  
  <pre><code>    pane: {
          center: ['50%', '85%'],
          size: '140%',
          startAngle: -90,
          endAngle: 90,
          background: {
              backgroundColor: (Highcharts.theme &amp;&amp; Highcharts.theme.background2) || '#EEE',
              innerRadius: '60%',
              outerRadius: '100%',
              shape: 'arc'
          }
      },
  </code></pre>
  
  <p>I also want the containing div to be vertically resizable, the problem being that, when it is resized, the chart eventually resizes outside of it's parent div's boundaries.</p>
  
  <pre><code>$('#resizer').resizable({
  
      handles: {'s': '#sgrip'},
      resize: function() {
          var chart = $('#container-speed').highcharts();
          chart.setSize(
              this.offsetWidth - 20, 
              this.offsetHeight - 20,
              false
          ); 
      }
  });
  </code></pre>
  
  <p>Is there any way around this?</p>
  
  <p>See example:
  <a href="http://jsfiddle.net/swj1naq2/" rel="nofollow">http://jsfiddle.net/swj1naq2/</a></p>