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 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 way to explicitly set the maximum width of the columns. Has anyone found a solution to that?

Answer 1

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.