score:16

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.

Basically:

  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 (series.data.length) {

    if (series.data[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.

score:0

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;
     this.redraw();
}

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.

score:0

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.

score:0

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

score:1

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

http://jsfiddle.net/pXZRV/40/

score:13

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(series.data.length > 0 ){
            var width = series.barW > series.options.maxPointWidth ? series.options.maxPointWidth : series.barW;
            each(this.data, function(point) {
                point.shapeArgs.x += (point.shapeArgs.width - width) / 2;
                point.shapeArgs.width = width;
            });
        }
        proceed.call(this);
    })
})(Highcharts)

Use:

$('#container').highcharts({
    chart: {
      type: 'column'
    },
    series: [{
        maxPointWidth: 50,
        data: [ ... ]
    }]
});

And live demo: http://jsfiddle.net/83M3T/1/

score:28

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:

$('#container').highcharts({
    /* 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:

http://jsfiddle.net/vu3dubhb/

And the documentation for this setting is here: http://api.highcharts.com/highcharts#plotOptions.column.maxPointWidth


Related Query

More Query from same tag