Highchart bubble cut off with max x/yAxis - highcharts

Question

I need to have a bubble chart with xAxis and yAxis from 0 to 5. If I have a bubble on the xAxis or yAxis 5, the bubble get cut of.
$(function () {
$('#container').highcharts({
chart: {
type: 'bubble',
zoomType: 'xy',
height: 500,
width: 500,
},
title: {
text: 'Highcharts Bubbles'
},
yAxis: {
min: 0,
max: 5,
gridLineWidth: 1,
},
xAxis: {
min: 0,
max: 5,
gridLineWidth: 1,
},
series: [{
data: [[5, 4, 2], [3, 1, 1], [4, 2, 3], [1, 2, 3], [1, 4, 1], [2, 5, 1], [5, 2, 3], [3, 2, 1]]
}]
});
});
http://jsfiddle.net/tum3zzzu/1/
I somehow found a trick with doing max: 5.5 but it work only for xAxis. On yAxis max: 5.5 is rounded to 6.
How can I solve this problem?

Answer 1

You can use tickPositioner to tell the chart exactly what to show as ticks. I also used showLastLabel: false to hide the last tick (which is 5.5). Here's what you can do in your code:
yAxis: {
min: 0,
max: 5.5,
endOnTick: true,
showLastLabel: false, // to hide 5.5
gridLineWidth: 1,
tickPositioner: function() {
var positions = [0], // to start from 0
tick = Math.floor(this.dataMin),
increment = Math.ceil((this.dataMax - this.dataMin) / 6);
for (tick; tick - increment < this.dataMax; tick += increment) {
positions.push(tick);
}
positions.push(this.dataMax + 0.5); // to add the last label 5.5
return positions;
}
}
And Here's the DEMO.