Accepted answer

Update: As of Highcharts version 4.1.8 , see Adam Goodwin's answer, below.

For many years, the only way to set the maximum width of the columns, was dynamically via JavaScript.


  1. Check the current bar width.
  2. If it is greater than desired, reset the series' pointWidth.
  3. Force a redraw to make the change visible.

Something like:

var chart = new Highcharts.Chart ( { ... ...

//--- Enforce a Maximum bar width.
var MaximumBarWidth = 40; //-- Pixels.
var series          = chart.series[0];

if ( {

    if ([0].barW  >  MaximumBarWidth) {
        series.options.pointWidth = MaximumBarWidth;
        /*--- Force a redraw.  Note that redraw() will not 
            fire in this case!
            Hence we use something like setSize().
        chart.setSize (400, 300);   

See the demo at jsFiddle.


I used the spacingTop attribute to enforce a maximum pointWidth on a bar chart:

if (series[0].data[0].pointWidth > maximumBarWidth) {
     this.options.chart.spacingTop = this.options.chart.height - (maximumBarWidth * series.length) - 30;
     this.isDirtyBox = true;

So if there is one Bar over a certain Width the spacing will be adjusted and the chart is drawn smaller.

This does not change the size of the container but keeps the bars beneath a certain size and your pointPadding and groupPadding will not be affected.

You could do the same with spacingRight and would have a consistent Chart without ugly spaces between the bars.


In my case, setting pointRange to 1 was what I needed. If a category with a box was adjacent to a category without a box (only outliers in a scatter series) the box would be wider than the category.

There is a good explanation here.


I faced the same issue using HighCharts and this is how I fixed it !!

-- Create a wrapper div for the chart, with some minimum width and overflow:auto. (To enable horizontal scroll)

-- Set the "pointWidth" of each bar to the required value. (say, pointWidth: 75)

-- Now set the chartWidth dynamically, based on the number of bars.

Use chartWidth = (number of bars) * (pointWidth) * 2

So, if you have 15 bars, chartWidth = 15*75*2 = 2250px, where 2 is used to create larger chart width, to accommodate spacing between bars.

--In this manner, You can have any number of bars of same width in the scrollable chart ... :)


        var series = chart.series[0];
        //--- Enforce a Maximum bar width
        if (series && {
            if ([0].pointWidth  >  MaximumBarWidth) {
                for(var i=0;i< chart.series.length;i++)


Ultimate solution is to wrap drawPoints and overwrite shaperArgs of each point, especially x-position and width:

(function(H) { 
    var each = H.each;
    H.wrap(H.seriesTypes.column.prototype, 'drawPoints', function(proceed) {
        var series = this;
        if( > 0 ){
            var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
            each(, function(point) {
                point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
                point.shapeArgs.width = width;


    chart: {
      type: 'column'
    series: [{
        maxPointWidth: 50,
        data: [ ... ]

And live demo:


Obviously this question was asked a long time ago when this feature didn't exist, but as of Highcharts 4.1.8 you can do this without any workarounds using the plotOptions.column.maxPointWidth setting:

    /* Other chart settings here... */
    plotOptions: {
        column: {
            /* Here is the setting to limit the maximum column width. */
            maxPointWidth: 50
    /* Other chart settings here... */

Below is the JSFiddle of the basic column chart example, modified to show this working:

And the documentation for this setting is here:

Related Query

More Query from same tag