tooltip jumps between series #4856
Description
Description
Steps to Reproduce
- Open the following chart: https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/PwYzqbm
- Move your mouse continuously from the left of the chart to the right
Expected Behavior
The tooltip moves from the first (leftmost) data point, to the second, to the third, ... until the last.
Actual Behavior
The tooltip jumps around between points and series, displaying data from points that are actually not being hovered.
Screenshots
Screencast.From.2024-12-09.14-52-49.mp4
Reproduction Link
https://codepen.io/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-/pen/PwYzqbm
Apex config
{
"chart": {
"type": "line",
"fontFamily": "inherit",
"parentHeightOffset": 0,
"height": "250px",
"stacked": false,
"toolbar": {
"show": false
},
"animations": {
"enabled": false
},
"zoom": {
"enabled": false
}
},
"theme": {
"palette": "palette4"
},
"dataLabels": {
"enabled": false,
"dropShadow": {
"enabled": true,
"color": "#f6f8fb"
}
},
"fill": {
"type": "solid"
},
"stroke": {
"width": 1,
"lineCap": "round",
"curve": "smooth"
},
"xaxis": {
"tooltip": {
"enabled": false
},
"tickAmount": 10,
"title": {},
"type": "datetime",
"labels": {
"datetimeUTC": false
},
"convertedCatToNumeric": false
},
"yaxis": [
{
"show": true,
"showAlways": false,
"showForNullSeries": true,
"opposite": false,
"reversed": false,
"logarithmic": false,
"logBase": 10,
"tickAmount": null,
"stepSize": null,
"forceNiceScale": false,
"floating": false,
"labels": {
"show": true,
"showDuplicates": false,
"minWidth": 0,
"maxWidth": 160,
"offsetX": 0,
"offsetY": 0,
"rotate": 0,
"padding": 20,
"style": {
"colors": [
null,
null,
null,
null,
null
],
"fontSize": "11px",
"fontWeight": 400,
"cssClass": ""
}
},
"axisBorder": {
"show": false,
"color": "#e0e0e0",
"width": 1,
"offsetX": 0,
"offsetY": 0
},
"axisTicks": {
"show": false,
"color": "#e0e0e0",
"width": 6,
"offsetX": 0,
"offsetY": 0
},
"title": {
"rotate": -90,
"offsetY": 0,
"offsetX": 0,
"style": {
"fontSize": "11px",
"fontWeight": 900,
"cssClass": ""
}
},
"tooltip": {
"enabled": false,
"offsetX": 0
},
"crosshairs": {
"show": true,
"position": "front",
"stroke": {
"color": "#b6b6b6",
"width": 1,
"dashArray": 0
}
}
}
],
"zaxis": {
"title": {}
},
"markers": {
"size": 5,
"strokeWidth": 0,
"hover": {
"sizeOffset": 5
}
},
"tooltip": {
"fillSeriesColor": false,
"y": {}
},
"plotOptions": {
"bar": {
"horizontal": false,
"borderRadius": 5
},
"bubble": {
"minBubbleRadius": 5
}
},
"colors": [
"#2fb344",
"#4263eb",
"#d6336c",
"#4299e1",
"#d63939",
"#74b816",
"#ae3ec9",
"#f59f00",
"#667382",
"#f76707",
"#d6336c",
"#0ca678",
"#4263eb",
"#17a2b8",
"#2fb344",
"#e6eef6",
"#fef5e6",
"#fbebf0",
"#eaf7ec",
"#fef0e6",
"#0054a6",
"#929dab",
"#bbc3cd",
"#dadfe5",
"#eef1f4",
"#f6f8fb",
"#fcfdfe",
"#000000"
],
"series": [
{
"name": 2022,
"data": [
{
"x": "2022-01-30T23:00:00.000Z",
"y": 3
},
{
"x": "2022-03-30T22:00:00.000Z",
"y": 2
},
{
"x": "2022-04-29T22:00:00.000Z",
"y": 2
},
{
"x": "2022-05-30T22:00:00.000Z",
"y": 2
},
{
"x": "2022-06-29T22:00:00.000Z",
"y": 3
},
{
"x": "2022-07-30T22:00:00.000Z",
"y": 7
},
{
"x": "2022-08-30T22:00:00.000Z",
"y": 1
},
{
"x": "2022-09-29T22:00:00.000Z",
"y": 3
},
{
"x": "2022-11-29T23:00:00.000Z",
"y": 15
},
{
"x": "2022-12-30T23:00:00.000Z",
"y": 6
}
],
"group": "apexcharts-axis-0"
},
{
"name": 2023,
"data": [
{
"x": "2023-01-30T23:00:00.000Z",
"y": 1
},
{
"x": "2023-02-27T23:00:00.000Z",
"y": 6
},
{
"x": "2023-03-30T22:00:00.000Z",
"y": 16
},
{
"x": "2023-04-29T22:00:00.000Z",
"y": 3
},
{
"x": "2023-06-29T22:00:00.000Z",
"y": 9
},
{
"x": "2023-07-30T22:00:00.000Z",
"y": 4
},
{
"x": "2023-08-30T22:00:00.000Z",
"y": 8
},
{
"x": "2023-09-29T22:00:00.000Z",
"y": 7
},
{
"x": "2023-10-30T23:00:00.000Z",
"y": 2
},
{
"x": "2023-12-30T23:00:00.000Z",
"y": 14
}
],
"group": "apexcharts-axis-0"
},
{
"name": 2024,
"data": [
{
"x": "2024-01-30T23:00:00.000Z",
"y": 2
},
{
"x": "2024-02-28T23:00:00.000Z",
"y": 2
},
{
"x": "2024-03-30T23:00:00.000Z",
"y": 3
},
{
"x": "2024-04-29T22:00:00.000Z",
"y": 2
},
{
"x": "2024-05-30T22:00:00.000Z",
"y": 3
},
{
"x": "2024-06-29T22:00:00.000Z",
"y": 4
},
{
"x": "2024-07-30T22:00:00.000Z",
"y": 2
},
{
"x": "2024-08-30T22:00:00.000Z",
"y": 12
},
{
"x": "2024-09-29T22:00:00.000Z",
"y": 9
},
{
"x": "2024-11-29T23:00:00.000Z",
"y": 2
},
{
"x": "2024-12-30T23:00:00.000Z",
"y": 3
}
],
"group": "apexcharts-axis-0"
}
],
"annotations": {
"yaxis": [],
"xaxis": [],
"points": []
}
}Initially reported in sqlpage/SQLPage#726