Maximum bar width in Highcharts column charts

I'm using Highcharts to create some vertical bars (a.k.a. "column charts") a lot like here: highcharts.com/demo/column-basic

Thing is, sometimes there are 30 bars in the chart, sometimes only two. Where then are two really wide bars in the chart, it looks really weird, so the decision was made to set a maximum width for the bars. That way if there are only two then they wouldn't get wider than, say, 50px, but if there were 50 then Highcharts could size them in the way it sees fit.

So my problem is that Highcharts doesn't have a w开发者_如何学Goay to explicitly set the maximum width of the columns. Has anyone found a solution to that?

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

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.

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/

a better way would be has suggested

http://highcharts.uservoice.com/forums/55896-general/suggestions/2079099-manually-set-the-column-width

check this fiddle

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/plotoptions/column-pointwidth-20/

just add

     series: {
                 pointWidth: 20
             }

in you plot options and thats it . :) enjoy cheers ...

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/

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.

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