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
}
}
Related
When I try to hover mouse along y-axis I observed that the tooltip is at the top but the point selected is at the bottom of the graph. This is because the point below might be the second point when we hover along the x-axis.
How do I make highcharts transverse points along the y-axis ?
Note: It is not a shared tooltip
I have tried setting the following attributes in the tooltip:
followPointer: true,
followTouchMove: true,
That is because of the default value of the findNearestPointBy option, which is 'x'. You can set it to 'y' or 'xy':
series: [{
findNearestPointBy: 'xy',
...
}]
Live demo: https://jsfiddle.net/BlackLabel/2nqdxp3z/
API Reference: https://api.highcharts.com/highcharts/series.line.findNearestPointBy
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
}
}
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.
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/
I was using flot pie chart(http://www.flotcharts.org/flot/examples/series-pie/index.html) example and succesfully drew the pie charts. While styling the pie chart, I was able to find the options for pie like colors and opacity and al. but I wanted to change the cursor styling on pie and I found that in the offcial flot page itself it is using ordinary cursor wehn we hover over pie slices. Instead i wanted to change it to cursor pointer styling.. when we give the creating canvas that property it will show pointer cursor for the whole canvas.. so if the canvas is big, it will be pointer cursor even if we hover outside pie graph. Ive also tried to giv the proeprty while at the time of creation,
$.plot($("#canvas_" + key.split(" ").join("_")), pieChartData[key], {
series: {
pie: {
show: true,
radius: 1,
innerRadius: 0.3,
cursor : 'pointer',
stroke: {
color: '#ffffff',
width: 2.0
}
},
}
});
This will not work.. is there any solution for this issue?
Take a look at the 'hoverable' option, described under Customizing the Grid
in the docs and demonstrated in the pie example.
Leave the cursor at default to begin with, then change it to the pointer when you receive a hover event over a pie slice. When you receive a hover event with no attached slice, set the cursor back to default.
You could just target the pie chart and change the CSS class in your stylesheet:
.flot-overlay { cursor: pointer; }
It's not the most graceful way, but it will work!