CODEWITHSUNDEEP
highchartspadding
Agustín Clemente
Agustín Clemente

Reputation: 1268

Highcharts - Axis minPadding and maxPadding not working

I was adding some padding to my chart because I want to control the space between the actual chart and the container, and I encountered a problem. Look at mi first fiddle, all seems legal but the padding isn't being applied: https://jsfiddle.net/9r2Lqmpj/

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        minPadding: 0.4,
        maxPadding: 0.4
    },
    yAxis: {
        startOnTick: false,
        minPadding: 0.2
    },
    series: [{
        data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

But if I duplicate the "xAxis" key, this time without the categories array, which seems highly wrong, for no reason it works: https://jsfiddle.net/v0rj1xkg/

Highcharts.chart('container', {
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        minPadding: 0.4,
        maxPadding: 0.4
    },
    xAxis: {
        minPadding: 0.4,
        maxPadding: 0.4
    },
    yAxis: {
        startOnTick: false,
        minPadding: 0.2
    },

    series: [{
        data: [129.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]
});

I wasn't expecting at all that this worked, in fact, I discovered it by mistake. Why is it working only when I repeat the xAxis key definition?

Upvotes: 0

Views: 667

Answers (2)

ppotaczek
ppotaczek

Reputation: 39069

Properties minPadding and maxPadding don't work with category axis type. Use min and max options instead.

Highcharts.chart('container', {
    xAxis: {...},
    ...
}, function() {
    var xAxis = this.xAxis[0];
    this.update({
        xAxis: [{
            min: xAxis.min + 0.2,
            max: xAxis.max - 0.2
        }]
    }, true, true, false);
});

Live demo: https://jsfiddle.net/BlackLabel/96s30khd/

Upvotes: 1

igorescento
igorescento

Reputation: 31

Well Agustin, not much of a discovery rather than a common logic there in your second scenario. I am not really sure what you're trying to achieve, but having xAxis defined twice is not necessary. Just remove the first one to get the same result, so it looks like your second one is overwriting the first one. Have a look at your fiddle here https://jsfiddle.net/xcmq869s/ which looks the same to me. Also it might be the case that the padding doesn't work with categorical data, so it works fine when no categories are specified. U can certainly alter the padding with removed categories.

On the other note, if you want to keep your x-axis labels and add only outer spacing, try using the chart.spacing config option as in the fiddle here https://jsfiddle.net/xcmq869s/1/.

Upvotes: 1

Related Questions