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:3

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