wildace
Posts: 9
Joined: Thu Oct 07, 2021 6:58 pm

Only show tooltip when user hover over a bubble in bubble chart

Hi,

Right now in my bubble chart the tooltip will show for the nearest bubble when navigating across the chart and I only want the tooltip to show when user is on the bubble. Is there any way I can disable this "findNearestPointBy" behavior?

My chart object looks like the following:
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy',
events: {
selection: (event) => {
if (event.resetSelection) {
resetSignalZoom();
return;
}

handleSignalZoom(
event.xAxis[0].min,
event.xAxis[0].max,
event.yAxis[0].min,
event.yAxis[0].max,
);
},
},
},
legend: {
enabled: true,
},
title: { text: '' },
xAxis: {
minPadding: 0.1,
maxPadding: 0.1,
title: { text: translatedStrings.prrAxisLabel },
type: BubbleChart.LOGARITHMIC_SCALE,
plotLines: [
{
dashStyle: 'Dash',
value: minThresholds.prr,
width: 2,
label: { text: translatedStrings.prrThresholdLabel, rotation: 0 },
zIndex: 4,
},
],
},
yAxis: {
minPadding: 0.1,
maxPadding: 0.1,
title: { text: translatedStrings.chiSquaredAxisLabel },
type: BubbleChart.LOGARITHMIC_SCALE,
plotLines: [
{
dashStyle: 'Dash',
value: minThresholds.chiSquared,
width: 2,
label: { text: translatedStrings.chiSquaredThresholdLabel },
zIndex: 4,
},
],
},
plotOptions: {
bubble: {
stickyTracking: false,
},
},
tooltip: {
useHTML: true,
followPointer: true,
formatter() {
const that = this;
const prrHoverValue = that.point.x === BUBBLE_CHART.EPSILON ? '~0' : that.point.x;
const x2HoverValue = that.point.y === BUBBLE_CHART.EPSILON ? '~0' : that.point.y;

return `
<table>
<tr>
<th colspan="2">
${renderToStaticMarkup(
<PtCodedNameField ptTerm={that.point[SIGNAL_FIELDS.SIGNAL]} />,
)}
</th>
</tr>
<tr>
<th>${translatedStrings.sourceLabel}:</th>
<td>${that.point[SIGNAL_FIELDS.DATASOURCE]}</td>
</tr>
<tr>
<th>PRR:</th> <td>${prrHoverValue}</td>
</tr>
<tr>
<th>χ2:</th> <td>${x2HoverValue}</td>
</tr>
<tr>
<th>${translatedStrings.numCasesLabel}:</th> <td>${that.point.z}</td>
</tr>
<tr>
<th>EBGM:</th> <td>${that.point[SIGNAL_FIELDS.EBGM]}</td>
</tr>
<tr>
<th>EB05:</th> <td>${that.point[SIGNAL_FIELDS.EB05]}</td>
</tr>
<tr>
<th>EB95:</th> <td>${that.point[SIGNAL_FIELDS.EB95]}</td>
</tr>
</table>
`;
},
},
series,
credits: {
enabled: false,
}
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Only show tooltip when user hover over a bubble in bubble chart

Hello,

You can set plotOptions.series.stickyTracking poroperty on false to disable "findNearestPointBy" behavior.

Demo: https://jsfiddle.net/BlackLabel/wxgrq7nc/
API: https://api.highcharts.com/highcharts/p ... kyTracking

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
wildace
Posts: 9
Joined: Thu Oct 07, 2021 6:58 pm

Re: Only show tooltip when user hover over a bubble in bubble chart

Hi Michał,

Thank you for replying.

I have tried both the plotOptions.series.stickyTracking and plotOptions.bubble.stickyTracking but it doesn't seem to work. I can still see the tooltip as soon as my cursor is in the chart area before reaching any actual bubble.
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Only show tooltip when user hover over a bubble in bubble chart

Hi,

As you can see in the demo I sent, it works, so it is hard to tell you what is wrong without taking look at your code.
Could you reproduce the issue in an online editor that I could work on? Because in the above snippet of code there are functions and variables that you didn't include.

Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Usage”