Q:

How to resize bar chart based on no of x axis categories in HighCharts

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.
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.

Chart with Asia,America,Europe,Ocenaia,Africa looks like this

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    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]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

Chart with just Asia looks like this

Highcharts.chart('container', {
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Historic World Population by Region'
    },
    subtitle: {
        text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
    },
    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]
    }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

As one can see the chart with asia has a lot of unsued space and makes it look overall weird.
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

A:

You can use chart.update() method to add a new height based on bars amount. Check code and demo posted below.
Code:

Highcharts.chart('container', {
  chart: {
    type: 'bar',
    events: {
      load: function() {
        var chart = this,
          barsLength = chart.series[0].data.length;

        chart.update({
          chart: {
            height: 100 + 50 * barsLength
          }
        }, true, false, false);
      }
    }
  },
  title: {
    text: 'Historic World Population by Region'
  },
  subtitle: {
    text: 'Source: <a href="https://en.wikipedia.org/wiki/World_population">Wikipedia.org</a>'
  },
  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: [107]
  }]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

Demo:

https://jsfiddle.net/BlackLabel/x3e8brgq/1/

API reference:

https://api.highcharts.com/class-reference/Highcharts.Chart#update

