HIghcharts: Bubble are not showing up beyond scale - highcharts

Question

Here is the code I have added to plot the bubble chart
{
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
},
title: {
text: 'Highcharts bubbles with radial gradient fill',
},
xAxis: {
gridLineWidth: 1,
min: 0,
},
yAxis: {
min: 0,
max: 100,
},
plotOptions: {
series: {
maxSize: 20,
cursor: 'pointer',
stickyTracking: false,
},
bubble: {
dataLabels: {
enabled: true,
format: '{point.y:,.0f}%',
inside: false,
align: 'center',
x: 0,
y: -8,
style: {
textOutline: 0,
fontWeight: '400',
color: 'black',
},
},
marker: {
lineWidth: 0,
},
},
},
series: [
{
data: [
[42, 38, 500],
[6, 18, 1],
[0, 93, 505],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 187, 89],
[57, 191, 82],
[45, 15, 98],
],
},
],
}
There you might find 2 data points not showing up because y-axis range has been defined. I would also need those points to be rendered in the graph at boundary level (at 100). Is there any special property to set this (or) it is not working even if highcharts had default feature like that. Please help me with this.

Answer 1

You can preprocess your data to set y: 100 for values that are greater than 100 and save the original value to show it, for example in a tooltip:
var data = [
...
];
var processedData = data.map(el => ({
x: el[0],
y: el[1] > 100 ? 100 : el[1],
z: el[2],
realYVal: el[1]
}));
Highcharts.chart('container', {
...,
series: [{
data: processedData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/jx0o7e1d/