title: Highcharts Bar Chart Auto Height
body: <p>I have a highcharts 3d Bar chart and I need the height to automatically size depending on how many bars are on the chart. We may only need 1 or we may need 100. the current problem is that it always expands to fill the page. So If I have one it will be a huge bar and if I have 100 it will be all smashed together. I need it to grow as it has data.</p>
  
  <p>I have done searching and see this <a href="http://jsfiddle.net/wkkAd/149/" rel="nofollow">http://jsfiddle.net/wkkAd/149/</a> demo.</p>
  
  <p>Here is my chart with that demo: <a href="http://jsfiddle.net/a40a0bjy/2/" rel="nofollow">http://jsfiddle.net/a40a0bjy/2/</a></p>
  
  <p>The issue is that I neeed to to grow as it has more bars. Right now, it expands to 100% of my page height.</p>
  
  <p>I set the bar height hoping that it would stop the chart from growing bigger but it does not work.</p>
  
  <p>Using:</p>
  
  <pre><code> pointWidth: 30//width of the column bars irrespective of the chart size
  </code></pre>
  
  <p>If I do that, it will just have the 30 width bars with all kinds of space and the chart still expands to fill the entire page height.</p>
  
  <p><strong>Update:</strong> This is what I want to do. <a href="http://jsfiddle.net/highcharts/jMX8G/" rel="nofollow">http://jsfiddle.net/highcharts/jMX8G/</a> 
  If you remove some of that data the charts automatically is smaller, while keeping the same size bar heights.</p>
  
  <p>This issue with that demo is that my data is much more complex than that demos. Here it is:</p>
  
  <pre><code>var data = [{
              name: 'Not Complete',
              data: [{
                  y: 5,
                  drilldown: {
                  TaskID: 343434545252,
                  name: 'somename'
                  }
  
              },
              {
                  y: 3,
                  drilldown: {
                  TaskID: 343434545252,
                  name: 'somename'
              }
          },
          {
                 y: 4,
                 drilldown: {
                 TaskID: 343434545252,
                 name: 'somename'
              }
          },
          {
                 y: 7,
                 drilldown: {
                 TaskID: 343434545252,
                 name: 'somename'
              }
          },
         {
                y: 2,
                drilldown: {
                TaskID: 343434545252,
                name: 'somename'
             }
         }]
      }, {
          name: 'Clean Up',
          data: [2, 2, 3, 2, 1]
      }, {
          name: 'Complete',
          data: [3, 4, 4, 2, 5]
      }];
  </code></pre>
  
  <p>Now the denmo uses this:</p>
  
  <pre><code> height: data.length * 20 + 120 // 20px per data item plus top and bottom margins
  </code></pre>
  
  <p>But I do not know how or what to get the length of for my data.</p>