How can I get highcharts barChart bars to always fill the container? - highcharts

Question

The same code generates both the images. In the first image the div (the blue border) is filled nicely. In the second image there is plenty of space on the top left over. I would like it to always fill the div the way it does in the first image. spacingTop: 0 seems to have no effect. Is there some other setting I should be using instead?
Here is the code:
new Highcharts.Chart({
chart: {
animation: false,
renderTo: data.id,
type: 'column',
height: data.height,
backgroundColor: 'transparent',
spacingTop: 0
},
title: {
text: ''
},
plotOptions: {
column: {
dataLabels: {
enabled: true,
formatter: function() {
var point = this.point;
setTimeout(function() {
point.dataLabel.attr({
y: point.name/1 > 0 ? point.plotY - 20 : point.yBottom - 20
});
});
return point.name;
}
},
pointWidth: 40,
borderWidth: 0
},
series: {
animation: false
}
},
xAxis: {
categories: [ data.labelActual, data.labelDelta, data.labelPlan ],
lineColor: '#CCCCCC',
labels: {
style: {
whiteSpace: 'nowrap', // This is not working
width: '200px' // This is the workaround
}
}
},
yAxis: {
title: {
text: ''
},
gridLineWidth: 0,
labels: {
formatter: function() {
if ((valuePlan < 0 || valueActual < 0) && this.value === 0) {
return '0';
}
return '';
}
},
plotLines: [ {
value: 0,
color: '#CCCCCC',
width: 1
} ],
opposite: true
},
credits: {
enabled: false
},
legend: {
enabled: false
},
series: [ {
data: [
{
y: valueActual,
low: 0,
name: valueActual,
color: {
linearGradient: [ 0, 0, 0, 100 ],
stops: [ [ 0, '#7F7F7F' ], [ 1, '#DDDDDD' ] ]
},
dataLabels: {
enabled: true,
y: valueActual < 0 ? 13 : -5,
style: {
color: '#7F7F7F'
}
}
},
{
y: valueActual,
low: Math.abs(valueDelta) < 1 ? valueActual - 1 : valueActual - valueDelta,
name: valueDelta > 0 ? '+' + valueDelta : valueDelta,
color: valueDelta === 0 ? '#7F7F7F' : {
linearGradient: [ 0, 0, 0, 100 ],
stops: [ [ 0, data.color === 'g' ? '#005712' : data.color === 'r' ? '#CC0000' : '#7F7F7F' ],
[ 1, data.color === 'g' ? '#A2C0A8' : data.color === 'r' ? '#E29A9A' : '#DDDDDD' ] ]
},
dataLabels: {
enabled: true,
y: valueDelta < 0 ? 13 : -5,
style: {
color: valueDelta === 0 ? '#7F7F7F' : data.color === 'g' ? '#005712' : data.color === 'r' ? '#CC0000' : '#7F7F7F'
}
}
}, {
y: valuePlan,
low: 0,
name: valuePlan,
color: {
linearGradient: [ 0, 0, 0, 100 ],
stops: [ [ 0, '#7F7F7F' ], [ 1, '#DDDDDD' ] ]
},
dataLabels: {
enabled: true,
y: valuePlan < 0 ? 13 : -5,
style: {
color: '#7F7F7F'
}
}
} ]
} ],
tooltip: {
enabled: false
},
exporting: {
enabled: false
}
});

Answer 1

Try maxPadding in yAxis - http://jsfiddle.net/zKHAw/
yAxis: {
endOnTick: false,
maxPadding: 0.1
},
spacingTop is for space above your chart, not the space between your graph and graph edge.