Limit bar width in column chart - maxPointWidth

[Martinsos]

Hi everybody!
I need to limit width of bars in column chart. For example, if I want to limit bar width to 60px, that means that however I resize the column chart bars should never grow larger in width then 60px.
I could not find direct support for this in Highcharts, so I followed some of the advice I found on stack overflow: http://stackoverflow.com/questions/5968 ... umn-charts . Idea is to check width of bars and then put their width to maximum width if they are over it. That works ok if chart renders just once, however if I resize the chart multiple times (for example user changes the size of window few times) those bars that whose width I set manually to maxWidth will not auto-adjust their width any more, but will keep maxWidth.
I resolved that using the following method: When I think bars maybe do not have ok width (which is after any redraw or load) I set bar width to 0 and redraw chart, so they will auto adjust their width (in case some of them are stuck on maxWidth). Then I put those that have to large width to maxWidth and redraw chart again. This works well and resolves the problem from before, however it kills loading animation of chart.
Is there some simpler, cleaner way to do this?

Check fiddle that I implemented, it uses method I described: http://jsfiddle.net/Martinsos/83M3T/ .
Try resizing frame with chart and you will notice how columns never grow larger then 30px, which is great. However, if you run fiddle with large frame (when bars should initially be larger then 30px) there will be no loading animation, which is bad. And the whole method is pretty hackish

Thank you!

[Fusher]

In general, it's not supported, but it's easy to implement this without extra cost, see: http://jsfiddle.net/83M3T/1/

Idea is to wrap drawPoints, loop over all of them and update shapeArgs, which are responsible for drawing shape.

Code: Select all

    (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)

I have added my answer to stackoverflow, I hope other people will find this helpful.

[Martinsos]

Thank you, your solution is perfect!
I can not find wrap method in Highcharts API, am I doing something wrong or is it unofficial method? Do you maybe know where I can find more information about that method?
Also, I think it would be great to suggest Highcharts staff to put your method in official API to support maxPointWidth!

[Fusher]

Here you can find wrap function description: http://www.highcharts.com/docs/extending-highcharts
My solution doesn't have the best performance (loop over all points again, after created shapes for them), and implementing this would require different code than I created, so I wouldn't expect this in core

[rs2371]

In general, it's not supported, but it's easy to implement this without extra cost, see: http://jsfiddle.net/83M3T/1/

This fiddle attempts to load highchart js lib from an http address. To get it to work again, change it to

Code: Select all

https://code.highcharts.com/highcharts.js

or use this updated https://jsfiddle.net/wLb953qx/.

[sebastian.h]

Hi rs2371,
Thanks for the insights.

Could you explain what exactly doesn't work without loading the HTTPS protocol, I don't understand?

Best regards.