Maximum bar width in Highcharts column charts

Question

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

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

Answer 2

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

Answer 3

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.

Answer 4

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.

Answer 5

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/

Answer 6

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.