title: Auto chart height
body: <p>The default highstock chart has height = 400px.</p>
  
  <p>How can height chart be set for auto size based on chart axis and its sizes ?</p>
  
  <p>See the example bellow, the navigation bar is over the volume panel.</p>
  
  <p><a href="http://jsfiddle.net/BYNsJ/" rel="noreferrer">http://jsfiddle.net/BYNsJ/</a></p>
  
  <p>I know that I can set the height for the div but I have a solution that insert/remove axis/series dynamically in the chart and would be nice an auto height chart.</p>
  
  <p>The example is the same Candlestick/Volume demo from Highchart site, but without height property in the div container.</p>
  
  <pre><code>    // split the data set into ohlc and volume
      var ohlc = [],
          volume = [],
          dataLength = data.length;
  
      for (i = 0; i &lt; dataLength; i++) {
          ohlc.push([
              data[i][0], // the date
              data[i][1], // open
              data[i][2], // high
              data[i][3], // low
              data[i][4] // close
          ]);
  
          volume.push([
              data[i][0], // the date
              data[i][5] // the volume
          ])
      }
  
      // set the allowed units for data grouping
      var groupingUnits = [[
          'week',                         // unit name
          [1]                             // allowed multiples
      ], [
          'month',
          [1, 2, 3, 4, 6]
      ]];
  
      // create the chart
      $('#container').highcharts('StockChart', {
  
          rangeSelector: {
              selected: 1
          },
  
          title: {
              text: 'AAPL Historical'
          },
  
          yAxis: [{
              title: {
                  text: 'OHLC'
              },
              height: 200,
              lineWidth: 2
          }, {
              title: {
                  text: 'Volume'
              },
              top: 300,
              height: 100,
              offset: 0,
              lineWidth: 2
          }],
  
          series: [{
              type: 'candlestick',
              name: 'AAPL',
              data: ohlc,
              dataGrouping: {
                  units: groupingUnits
              }
          }, {
              type: 'column',
              name: 'Volume',
              data: volume,
              yAxis: 1,
              dataGrouping: {
                  units: groupingUnits
              }
          }]
      });
      });
  });
  </code></pre>
  
  <p>Regards.</p>