I want to show multiple tool tips at the same time in a Highchart. The basic requirement is like whenever the mouse is hovered over a point in the series I need to show the tool tip for all the points within a radius X of the hovered point. I have tried something like this so far : /
$(function () {
$('#container').highcharts({
title: {
text: 'Multiple tooltips'
},
plotOptions: {
series: {
point: {
events: {
mouseOver: function (event) {
var r = 50;
var arr = [];
var chart = this.series.chart;
var currX = this.plotX;
var currY = this.plotY;
var points = this.series.points;
for(var i=0;i<points.length;i++){
var xdiff = currX - points[i].plotX;
var ydiff = currY - points[i].plotY;
var distance = Math.abs(xdiff*xdiff - ydiff*ydiff);
if(distance < r*r)
arr.push(points[i]);
}
chart.tooltip.refresh(arr);
}
}
},
}
},
tooltip: {
enabled: true,
shared : true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
But I need multiple tool tips at the same time and not just one big tool tip for all the points concerned. If that is possible , is there a way to get these tool tips self aligned as per the space available ? Is there any existing plugin/feature in Highcharts that can help me solve this problem ?
I want to show multiple tool tips at the same time in a Highchart. The basic requirement is like whenever the mouse is hovered over a point in the series I need to show the tool tip for all the points within a radius X of the hovered point. I have tried something like this so far : http://jsfiddle/vmso2dbf/
$(function () {
$('#container').highcharts({
title: {
text: 'Multiple tooltips'
},
plotOptions: {
series: {
point: {
events: {
mouseOver: function (event) {
var r = 50;
var arr = [];
var chart = this.series.chart;
var currX = this.plotX;
var currY = this.plotY;
var points = this.series.points;
for(var i=0;i<points.length;i++){
var xdiff = currX - points[i].plotX;
var ydiff = currY - points[i].plotY;
var distance = Math.abs(xdiff*xdiff - ydiff*ydiff);
if(distance < r*r)
arr.push(points[i]);
}
chart.tooltip.refresh(arr);
}
}
},
}
},
tooltip: {
enabled: true,
shared : true
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
But I need multiple tool tips at the same time and not just one big tool tip for all the points concerned. If that is possible , is there a way to get these tool tips self aligned as per the space available ? Is there any existing plugin/feature in Highcharts that can help me solve this problem ?
Share Improve this question edited Mar 7, 2015 at 20:05 Halvor Holsten Strand 20.6k17 gold badges88 silver badges102 bronze badges asked Mar 7, 2015 at 18:40 KumaranKumaran 3094 silver badges11 bronze badges2 Answers
Reset to default 4A way to achieve this is to clone tooltips. In addition you will have to keep track of the clones as you keep hovering over new points, to correctly remove old tooltips and add new ones.
An example which adds to your code would be (new code is mented):
// Array for keeping track of open tooltips
var openTooltips = [];
$('#container').highcharts({
// Skipping irrelevant options
plotOptions: {
series: {
point: {
events: {
mouseOver: function (event) {
var chart = this.series.chart;
// Remove any currently open tooltips
for(var i = 0; i < openTooltips.length; i++) {
chart.container.firstChild.removeChild(openTooltips[i]);
}
// Reset array
openTooltips = [];
var r = 50;
var currX = this.plotX;
var currY = this.plotY;
var points = this.series.points;
for(var i=0;i<points.length;i++){
var xdiff = currX - points[i].plotX;
var ydiff = currY - points[i].plotY;
// Changed distance formula to use plus instead of minus
var distance = Math.abs(xdiff*xdiff + ydiff*ydiff);
if(distance < r*r) {
// Open the tooltip for the point
chart.tooltip.refresh([points[i]]);
// Clone tooltip and add it to array
openTooltips.push(this.series.chart.tooltip.label.element.cloneNode(true));
// Append tooltip to show it in chart
chart.container.firstChild.appendChild(openTooltips[openTooltips.length-1]);
}
}
}
}
},
}
},
tooltip: {
enabled: true,
shared : true,
animation: false // Disable animation to get correct tooltip positions
}
});
As you can see most of the changes are in cloning the tooltip and keeping track of them. Note that tooltip animation has been disabled to avoid misplaced tooltips. I also changed your distance formula from a difference to a sum, as is normal in finding Euclidean distance.
See this JSFiddle example of how it looks and works. The tooltip code in this answer is strongly inspired by Marks answer for "Keep tooltip showing on click".
Write following in your tooltip block if you dont want a one mon tooltip.
tooltip: {
enabled: true,
shared : false
}