title: How to resize bar chart based on no of x axis categories in HighCharts
body: <p>I am working on adding some bar charts using the Highcharts . My chart looks kind of sparse when there are too few values in x-axis and too crowded if there are too many values.</p>
  
  <p>I have fiddled with plotOptions options like  (pointPadding,groupPadding,borderWidth,pointWidt). This seems to prevent dynamic resizing of the bar to make it consistent but does not help with resizing the overall chart.</p>
  
  <ul>
  <li>Chart with Asia,America,Europe,Ocenaia,Africa looks like this</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
      chart: {
          type: 'bar'
      },
      title: {
          text: 'Historic World Population by Region'
      },
      subtitle: {
          text: 'Source: &lt;a href="https://en.wikipedia.org/wiki/World_population"&gt;Wikipedia.org&lt;/a&gt;'
      },
      xAxis: {
          categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
          title: {
              text: null
          }
      },
      yAxis: {
          visible:false
      },
      tooltip: {
          valueSuffix: ' millions'
      },
      plotOptions: {
          bar: {
              dataLabels: {
                  enabled: true
              },
              pointPadding: 0,
              groupPadding: 0,
              borderWidth: 0,
              pointWidth: 20
          }
      },
      legend: {
          enabled:false
      },
      credits: {
          enabled: false
      },
      series: [{
          name: 'Year 1800',
          data: [107, 31, 635, 203, 2]
      }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <ul>
  <li>Chart with just Asia looks like this</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Highcharts.chart('container', {
      chart: {
          type: 'bar'
      },
      title: {
          text: 'Historic World Population by Region'
      },
      subtitle: {
          text: 'Source: &lt;a href="https://en.wikipedia.org/wiki/World_population"&gt;Wikipedia.org&lt;/a&gt;'
      },
      xAxis: {
          categories: ['Asia'],
          title: {
              text: null
          }
      },
      yAxis: {
          visible:false
      },
      tooltip: {
          valueSuffix: ' millions'
      },
      plotOptions: {
          bar: {
              dataLabels: {
                  enabled: true
              },
              pointPadding: 0,
              groupPadding: 0,
              borderWidth: 0,
              pointWidth: 20
          }
      },
      legend: {
          enabled:false
      },
      credits: {
          enabled: false
      },
      series: [{
          name: 'Year 1800',
          data: [635]
      }]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/exporting.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.highcharts.com/modules/export-data.js"&gt;&lt;/script&gt;
  
  &lt;div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As one can see the chart with asia has a lot of unsued space and makes it look overall weird.</p>
  
  <p>I want to see if anyone knows how can I change the overall height of the chart dynamically based on no of values in X-Axis categories</p>