I have a dumbbell Highcharts graph that displays some ranges. If there are multiple ranges per "x"-axis`(my graph is inverted), the tooltip is only shown for one range per "category", doesn't matter where you hover the mouse.
It happens both for overlapping and non-overlapping ranges.
I tried to reduce the problem to most basic case in this fiddle: https://jsfiddle.net/a536ozec/
Am i doing something wrong or is there a setting i'm not aware of?
The config:
Highcharts.chart('container', {
"chart": {
"type": "dumbbell",
"inverted": true,
},
"legend": {
"enabled": true
},
"plotOptions": {
"series": {
"marker": {
"enabled": true
}
}
},
"series": [
{
"type": "dumbbell",
"name": "Test",
"data": [
{
"name": "Test1",
"low": 1658882324000,
"high": 1699267066000,
"v": "A"
},
{
"name": "Test1",
"low": 1681067066000,
"high": 1739067066000,
"v": "B"
},
{
"name": "Test2",
"low": 1658882324000,
"high": 1690267066000,
"v": "C"
},
{
"name": "Test2",
"low": 1711067066000,
"high": 1739067066000,
"v": "D"
},
],
"dashStyle": "Solid",
"lineWidth": 1,
"label": {
"enabled": false
},
"visible": true,
"tooltip": null,
}
],
"xAxis": {
"labels": {
"style": {
"fontSize": "9px"
}
},
"type": "category",
"crosshair": true
},
"yAxis": {
"title": {
"text": "Test range"
},
"crosshair": true,
"labels": {
"format": "{value:%Y%m%d}"
}
},
"tooltip": {
"pointFormat": "{point.v} - {point.low:%Y%m%d} - {point.high:%Y%m%d}",
"enabled": true
}
});`
That's because of the default setting for findNearestPointBy
, which is x
. As a solution set it to xy
:
series: [
{
findNearestPointBy: 'xy',
...
}
]
Live demo: https://jsfiddle.net/BlackLabel/txwmd3z8/
API Reference: https://api.highcharts.com/highcharts/series.dumbbell.findNearestPointBy