I'm not sure if there is much I can give here code wise, but I am running into a problem with the tooltip in highcharts for a combined bubble/scatter chart. It is worth noting that in the case I am working with now, there is only a single point in either series, so only two things on the chart at once.
If I chart two series of bubbles, like this for example:
myChart.addSeries({
name: name1,
color: '#000000',
data: firstSeries,
type: 'bubble'
}, true);
myChart.addSeries({
name: name2,
color: '#058DC7',
data: secondSeries,
type: 'bubble'
}, true);
The tooltips work perfectly. I can mouse over one bubble and see the tooltip, then mouse over another and see the tooltip.
But, if I do the exact same thing only replacing either of the "bubble" with "scatter", I run into some weird behavior where if I mouse over the bubble I can see the tooltip until my mouse moves. If the mouse moves even a single pixel, Highcharts will suddenly display the tooltip on the scatter point as if I am moused over the scatter point. If I move my mouse away from the bubble, the tooltip on the scatter disappears.
The scatter tooltip behaves as expected when moused over. If it matters, I have disabled stickyTracking and have the snap set to 10. Setting the snap didn't seem to fix anything. Before I disabled stickyTracking, my mouse being anywhere on the chart would result in the tooltip for the scatter point being displayed.
Related
For a Highchart bubble chart I've got a hook in the chart events for render such that it looks at the bubble and datalabel and that relocates the datalabel when an overlap with another label occurs. It also figures out the x,y of the bubble and datalabel and draws a leader line from the label to the bubble. That works pretty well except for the case when the legend item is clicked to filter the bubbles. When Highcharts moves stuff around in this case, the render event series data has the x,y values from BEFORE the move which goofs up where the lines are drawing to.
Optimally, I'd like like know when the chart is completed renderering after the legend filter changes, then I can run the same logic to avoid collisions. At the moment, the collision logic I have is getting the location values before the legend filter process has laid out the elements. When I debug and toggle on/off the legend filter I see the new location in the series point datalabels so it leads me to believe the new values are there after the legend filter layout does it's thing.
I have something similar to the Chart Js sample here where I have multiple datasets in my chart that I set as 'index.' When you hover over a point, each dataset's point matching that x-value will highlight. Is there any way to set that highlighting to work the same way as the tooltip? I want to have the points highlight when the mouse hovers over the x-axis, not just the points.
You're looking for options.hover.intersect:
if true, the hover mode only applies when the mouse position intersects an item on the chart.
The default is true so you should change it to false:
options: {
hover: {
intersect: false
}
}
Using this jsfiddle for example, I want to be able to mouse over any position on the spline and show a tooltip presenting x and y, vs. only showing a tooltip for the predefined series data points as it currently works. Is there such an option with Highcharts?
Only thing I see in the documentation would be followPointer which keeps the tooltip on the pointer but the series data points are still selected.
series: {
tooltip: {
followPointer: true
}
}
Sorry to not include a fiddle as the highchart chart is tied tight to my application. Earlier the mouse events were getting tracked over the legends as well as the legend labels . For some reason these labels does not take the events anymore, rather it goes to the container holding the charts.
Any inputs?
Also when i try to inspect the above highlighted legend label, the parent container is highlighted instead of the label itself. The above problem is seen for other labels out of the plot area as well.
You can use custom-events extension which allows to catch this event on legend item.
legend: {
itemEvents: {
mouseover:function(){
console.log(this);
}
}
},
Example: http://jsfiddle.net/Utx8g/413/
Between two points on a line, if you move the cursor to the right of the midpoint, it will show the tooltip for the right point. Is there a way to keep the tooltip focused on the closest tooltip to the left? I find this more intuitive for my stepchart so that the tooltip displays the info for the current step being moused over.
Unfortunaltey it is not possible, but you can try to replace line chart with, scatter series and setting lineWidth as 2.
plotOptions:{
series:{
lineWidth:2
}
},
example: http://jsfiddle.net/JG83j/