Controlling Highcharts bar chart look and layout

Question

I have a bar chart where the data is coming from the database, so I don't know how many categories or series it will contain, but I still wish to display the different charts with the same standard look and feel (same bar width, space between bars, space between categories, etc.).

The chart width has to be 600px and each bar has to be 20px wide. The space between the bars has to be 5px and the space between the categories has to be 20px. The height should be calculated based on these values as I think that Highcharts doesnt do this by itself.

I tried to solve this by setting pointWidth to 20px, and then calculating the height. But I am unsure about the pointPadding and groupPadding values. It says that it's value is given in x-axis units. My x-axis only contains categories (i.e. fruits: lemon, orange, apple, etc.). What is the x-axis unit for such a category?

I have made an example fiddle where I am calculating the chart height based on the number of categories, number of series, pointWidth, pointPadding, groupPadding:

var pointWidthInPx = 20,
    spaceBetweenBarsInPx = 5,
    groupPaddingInPx = 5,
    categories = ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
    series = [{
            name: 'Year 1800',
            data: [107, 55, 635, 203, 30]
        }, {
            name: 'Year 1900',
            data: [133, 156, 550, 408, 45]
        }, {
            name: 'Year 2008',
            data: [500, 604, 404, 632, 60]
        }];

var totalPointWidthsInPx = pointWidthInPx * categories.length * series.length,
    totalSpaceBetweenBarsInPx = spaceBetweenBarsInPx * categories.length * (series.length - 1),
    totalGroupPaddingsInPx = (groupPaddingInPx * 2) * categories.length,
    calculatedHeightInPx = totalPointWidthsInPx + totalSpaceBetweenBarsInPx + totalGroupPaddingsInPx;

var groupPadding = (groupPaddingInPx * categories.length) / calculatedHeightInPx;

http://jsfiddle.net/VpMtD/

Ufortunately, I can't seem to get the correct pixel value of the groupPadding or the pointPadding correctly.

Any help on how to solve this will be greatly appreciated.

Paweł Fus Paweł Fus · Accepted Answer · 2014-05-12T12:13:27

You need to calculate height of the chart according to your needs. For example: http://jsfiddle.net/PhVDV/6/

function genChart(n) {
    var pointWidth = 20;
    var h = (pointWidth + 10) * 2 * n + 50 + 70;
    // + 10- distance between bars
    // * 2 - number of series
    // +50+70 - margins top + bottom
    // n - number of points
    if ($('#container').highcharts()) {
        $('#container').highcharts().destroy();
    }
    $('#container').highcharts({
        chart: {
            type: 'bar',
            marginTop: 50,
            marginBottom: 70,
            height: h
        },
        plotOptions: {
            bar: {
                pointWidth: pointWidth,
                groupPadding:0,
            }
        },
        series: [{
            data: randomData(n)
        }, {
            data: randomData(n)
        }]
    });
}

function randomData(n) {
    var d = [];
    while (n--) {
        d.push(Math.random());
    }
    return d;
}

$("button").click(function () {
    genChart(Math.round(Math.random() * 20) + 4);
});

Controlling Highcharts bar chart look and layout

1 Answers