Dots keep appearing on my areaspline chart after hover

[branko]

Screenshot_7.png (20.06 KiB) Viewed 379 times

I've noticed this on some of the other projects as well. I'm unsure to what the cause is, since i don't have anything tracking the hover.
My bigger issue is that it happens sometime, when i reload the page and check that chart it works normally.

Package:
"highcharts": "^11.4.8",
"highcharts-react-official": "^3.2.1",


Options:
{
"chart": {
"type": "areaspline",
"spacingLeft": 0,
"marginRight": 10
},
"title": {
"text": ""
},
"xAxis": {
"type": "datetime",
"lineColor": "#CCCCCC",
"tickColor": "#CCCCCC",
"className": "w-fit",
"dateTimeLabelFormats": {
"day": "%e %b %Y",
"week": "%e %b",
"month": "%b %Y",
"year": "%Y"
},
"labels": {
"style": {
"fontSize": "12px",
"color": "#191919"
}
},
"crosshair": {
"dashStyle": "Solid",
"color": "#24374D",
"width": 1
}
},
"accessibility": {
"enabled": true
},
"exporting": {
"enabled": false
},
"yAxis": [
{
"opposite": true,
"offset": -25,
"title": {
"text": ""
},
"labels": {
"style": {
"fontSize": "14px",
"color": "#191919"
},
"allowOverlap": false,
"align": "center",
"format": "{value}"
},
"gridLineWidth": 0
}
],
"plotOptions": {
"areaspline": {
"marker": {
"enabled": false
},
"lineWidth": 1,
"states": {
"hover": {
"lineWidth": 1
}
},
"fillOpacity": 0,
"threshold": null,
"showInLegend": false
}
},
"tooltip": {
"className": "opacity-90",
"shared": false,
"useHTML": true,
"outside": true,
"borderWidth": 1,
"shadow": false,
"borderRadius": 10,
"borderColor": "#19191929"
},
"series": [
{
"type": "areaspline",
"data": [
{
"x": 1704153600000,
"y": -0.059866451761408826
},
{
"x": 1704240000000,
"y": 0.2901220354590077
},
{
"x": 1704326400000,
"y": -0.2947271471333079
},
{
"x": 1704412800000,
"y": -0.2993322588072988
},
{
"x": 1704672000000,
"y": -0.9072069997696963
},
{
"x": 1704758400000,
"y": 0.06907667510900865
},
{
"x": 1704844800000,
"y": 0.3960396039599982
},
{
"x": 1704931200000,
"y": 0.5065622841349977
},
{
"x": 1705017600000,
"y": 0.5111673958090068
},
{
"x": 1705276800000,
"y": 0.5756389592450069
},
{
"x": 1705363200000,
"y": 0.5526134008749978
},
{
"x": 1705449600000,
"y": 0.8749712180519964
},
{
"x": 1705536000000,
"y": 0.4513009440479982
},
{
"x": 1705622400000,
"y": 0.9762836748789959
},
{
"x": 1705881600000,
"y": 1.215749481924995
},
{
"x": 1705968000000,
"y": 2.3440018420449995
},
{
"x": 1706054400000,
"y": 2.413078517154008
},
{
"x": 1706140800000,
"y": 2.5834676490899984
},
{
"x": 1706227200000,
"y": 2.422288740502008
},
{
"x": 1706486400000,
"y": 2.0999309233249916
},
{
"x": 1706572800000,
"y": 2.657149435873998
},
{
"x": 1706659200000,
"y": 2.993322588073006
},
{
"x": 1706745600000,
"y": 2.730831222656998
},
{
"x": 1706832000000,
"y": 2.6064932074600073
},
{
"x": 1707091200000,
"y": 3.8821091411469935
},
{
"x": 1707177600000,
"y": 4.420907207
},
{
"x": 1707264000000,
"y": 4.5959014506099996
},
{
"x": 1707350400000,
"y": 4.338015196869001
},
{
"x": 1707436800000,
"y": 4.812341699286008
},
{
"x": 1707696000000,
"y": 4.692608795763008
},
{
"x": 1707782400000,
"y": 4.646557679024008
},
{
"x": 1707868800000,
"y": 4.503799217131
},
{
"x": 1707955200000,
"y": 4.660373014045999
},
{
"x": 1708041600000,
"y": 5.208381303247006
},
{
"x": 1708300800000,
"y": 5.484688003684004
},
{
"x": 1708387200000,
"y": 5.387980658530996
},
{
"x": 1708473600000,
"y": 4.628137232328008
},
{
"x": 1708560000000,
"y": 4.347225420216001
},
{
"x": 1708646400000,
"y": 5.894542942665994
},
{
"x": 1708905600000,
"y": 6.741883490675009
},
{
"x": 1708992000000,
"y": 6.603730140455991
},
{
"x": 1709078400000,
"y": 6.470181901911001
},
{
"x": 1709164800000,
"y": 6.447156343540992
},
{
"x": 1709251200000,
"y": 7.027400414460008
},
{
"x": 1709510400000,
"y": 7.266866221506007
},
{
"x": 1709596800000,
"y": 7.418834906745997
},
{
"x": 1709683200000,
"y": 7.216209993091997
},
{
"x": 1709769600000,
"y": 6.972139074373008
},
{
"x": 1709856000000,
"y": 7.206999769743998
},
{
"x": 1710115200000,
"y": 7.589224038683005
},
{
"x": 1710201600000,
"y": 7.2208151047660065
},
{
"x": 1710288000000,
"y": 8.593138383606002
},
{
"x": 1710374400000,
"y": 8.482615703431001
},
{
"x": 1710460800000,
"y": 8.634584388670993
},
{
"x": 1710720000000,
"y": 8.616163941975993
},
{
"x": 1710806400000,
"y": 9.081280221044999
},
{
"x": 1710892800000,
"y": 8.786553073912
},
{
"x": 1710979200000,
"y": 9.417453373244006
},
{
"x": 1711065600000,
"y": 10.766751093713992
},
{
"x": 1711324800000,
"y": 11.139765139305
},
{
"x": 1711411200000,
"y": 10.679253971909002
},
{
"x": 1711497600000,
"y": 11.231867372784
},
{
"x": 1711584000000,
"y": 11.540409854939007
},
{
"x": 1712016000000,
"y": 12.134469260879996
},
{
"x": 1712102400000,
"y": 11.425282063089998
},
{
"x": 1712188800000,
"y": 10.702279530278993
},
{
"x": 1712275200000,
"y": 10.762145982040002
},
{
"x": 1712534400000,
"y": 10.278609256273993
},
{
"x": 1712620800000,
"y": 10.292424591296003
},
{
"x": 1712707200000,
"y": 10.250978586230994
},
{
"x": 1712793600000,
"y": 10.564126180059993
},
{
"x": 1712880000000,
"y": 10.485839281603003
},
{
"x": 1713139200000,
"y": 10.743725535344002
},
{
"x": 1713225600000,
"y": 10.914114667280991
},
{
"x": 1713312000000,
"y": 9.095095556067008
},
{
"x": 1713398400000,
"y": 9.435873819940007
},
{
"x": 1713484800000,
"y": 9.164172231176998
},
{
"x": 1713744000000,
"y": 8.74971218052
},
{
"x": 1713830400000,
"y": 8.87405019571701
},
{
"x": 1713916800000,
"y": 9.500345383376008
},
{
"x": 1714003200000,
"y": 10.527285286667993
},
{
"x": 1714089600000,
"y": 9.339166474786998
},
{
"x": 1714348800000,
"y": 10.987796454063991
},
{
"x": 1714435200000,
"y": 11.406861616393998
},
{
"x": 1714608000000,
"y": 12.028551692379006
},
{
"x": 1714694400000,
"y": 11.167395809348
},
{
"x": 1714953600000,
"y": 10.858853327192993
},
{
"x": 1715040000000,
"y": 11.185816256044
},
{
"x": 1715126400000,
"y": 12.466037301404995
},
{
"x": 1715299200000,
"y": 12.793000230256002
},
{
"x": 1715558400000,
"y": 13.119963159106993
},
{
"x": 1715644800000,
"y": 13.193644945889991
},
{
"x": 1715731200000,
"y": 13.364034077826
},
{
"x": 1715817600000,
"y": 13.796914575177999
},
{
"x": 1715904000000,
"y": 14.082431498963997
},
{
"x": 1716163200000,
"y": 13.695602118350998
},
{
"x": 1716249600000,
"y": 13.819940133548007
},
{
"x": 1716336000000,
"y": 13.428505641262
},
{
"x": 1716422400000,
"y": 13.644945889938008
},
{
"x": 1716508800000,
"y": 13.230485839281991
},
{
"x": 1716768000000,
"y": 12.346304397881996
},
{
"x": 1716854400000,
"y": 12.281832834445995
},
{
"x": 1716940800000,
"y": 12.010131245683006
},
{
"x": 1717027200000,
"y": 11.411466728068008
},
{
"x": 1717113600000,
"y": 11.236472484458009
},
{
"x": 1717372800000,
"y": 10.831222657148992
},
{
"x": 1717459200000,
"y": 11.766060326962997
},
{
"x": 1717545600000,
"y": 12.111443702510005
},
{
"x": 1717718400000,
"y": 12.539719088187994
},
{
"x": 1717977600000,
"y": 13.939673037071007
},
{
"x": 1718064000000,
"y": 13.617315219894008
},
{
"x": 1718150400000,
"y": 13.520607874741
},
{
"x": 1718236800000,
"y": 13.589684549850007
},
{
"x": 1718323200000,
"y": 13.962698595440997
},
{
"x": 1718582400000,
"y": 14.077826387290006
},
{
"x": 1718668800000,
"y": 14.262030854248005
},
{
"x": 1718755200000,
"y": 14.128482615702996
},
{
"x": 1718841600000,
"y": 14.050195717246005
},
{
"x": 1719187200000,
"y": 13.649551001611998
},
{
"x": 1719273600000,
"y": 13.815335021873999
},
{
"x": 1719360000000,
"y": 13.792309463504006
},
{
"x": 1719446400000,
"y": 14.450840432880996
},
{
"x": 1719532800000,
"y": 14.128482615702996
},
{
"x": 1719792000000,
"y": 14.524522219663995
},
{
"x": 1719878400000,
"y": 14.165323509094996
},
{
"x": 1719964800000,
"y": 14.289661524292006
},
{
"x": 1720051200000,
"y": 14.188349067465005
},
{
"x": 1720137600000,
"y": 14.432419986184996
},
{
"x": 1720396800000,
"y": 14.759382915036003
},
{
"x": 1720483200000,
"y": 15.137002072300001
},
{
"x": 1720569600000,
"y": 15.242919640800991
},
{
"x": 1720656000000,
"y": 16.472484457747996
},
{
"x": 1720742400000,
"y": 17.605341929541993
},
{
"x": 1721001600000,
"y": 18.448077365875996
},
{
"x": 1721088000000,
"y": 18.811881188119006
},
{
"x": 1721174400000,
"y": 19.203315680404994
},
{
"x": 1721260800000,
"y": 17.941515081741
},
{
"x": 1721347200000,
"y": 18.107299102002997
},
{
"x": 1721606400000,
"y": 18.13953488372101
},
{
"x": 1721692800000,
"y": 19.258577020492993
},
{
"x": 1721779200000,
"y": 19.95394888326
},
{
"x": 1721865600000,
"y": 18.834906746488997
},
{
"x": 1721952000000,
"y": 17.683628827999
},
{
"x": 1722211200000,
"y": 17.80796684319601
},
{
"x": 1722297600000,
"y": 18.627676721160004
},
{
"x": 1722384000000,
"y": 18.415841584158006
},
{
"x": 1722470400000,
"y": 18.443472254202007
},
{
"x": 1722556800000,
"y": 18.392816025789
},
{
"x": 1722816000000,
"y": 15.634354133088
},
{
"x": 1722902400000,
"y": 12.410775961316995
},
{
"x": 1722988800000,
"y": 13.138383605801991
},
{
"x": 1723075200000,
"y": 13.548238544784999
},
{
"x": 1723161600000,
"y": 13.304167626064991
},
{
"x": 1723420800000,
"y": 14.202164402486996
},
{
"x": 1723507200000,
"y": 14.068616163942005
},
{
"x": 1723593600000,
"y": 15.113976513929993
},
{
"x": 1723680000000,
"y": 15.173842965692002
},
{
"x": 1723766400000,
"y": 16.569191802901006
},
{
"x": 1724025600000,
"y": 17.181671655537993
},
{
"x": 1724112000000,
"y": 16.822472944968993
},
{
"x": 1724198400000,
"y": 16.578402026249005
},
{
"x": 1724284800000,
"y": 16.467879346074007
},
{
"x": 1724371200000,
"y": 17.614552152889992
},
{
"x": 1724630400000,
"y": 17.499424361041
},
{
"x": 1724716800000,
"y": 17.582316371172002
},
{
"x": 1724803200000,
"y": 17.020492746949003
},
{
"x": 1724889600000,
"y": 17.333640340778
},
{
"x": 1724976000000,
"y": 17.209302325580992
},
{
"x": 1725235200000,
"y": 18.567810269398997
},
{
"x": 1725321600000,
"y": 18.379000690767008
},
{
"x": 1725408000000,
"y": 18.190191112134
},
{
"x": 1725494400000,
"y": 16.587612249597004
},
{
"x": 1725580800000,
"y": 16.251439097398
},
{
"x": 1725840000000,
"y": 15.915265945199007
},
{
"x": 1725926400000,
"y": 17.342850564126003
},
{
"x": 1726012800000,
"y": 17.126410315449995
},
{
"x": 1726099200000,
"y": 17.646787934607
},
{
"x": 1726185600000,
"y": 18.429656919179997
},
{
"x": 1726444800000,
"y": 18.379000690767008
},
{
"x": 1726531200000,
"y": 18.355975132397
},
{
"x": 1726617600000,
"y": 18.669122726225996
},
{
"x": 1726704000000,
"y": 17.913884411696998
},
{
"x": 1726790400000,
"y": 18.775040294727006
},
{
"x": 1727049600000,
"y": 18.613861386138996
},
{
"x": 1727136000000,
"y": 18.208611558829997
},
{
"x": 1727222400000,
"y": 17.78033617315201
},
{
"x": 1727308800000,
"y": 18.586230716094995
},
{
"x": 1727395200000,
"y": 20.20723002532801
},
{
"x": 1727654400000,
"y": 19.742113746258
},
{
"x": 1727740800000,
"y": 19.580934837669993
},
{
"x": 1727827200000,
"y": 19.594750172692002
},
{
"x": 1727913600000,
"y": 18.747409624683005
},
{
"x": 1728000000000,
"y": 18.862537416531996
},
{
"x": 1728259200000,
"y": 19.60396039604
},
{
"x": 1728345600000,
"y": 19.359889477319992
},
{
"x": 1728432000000,
"y": 19.65461662445299
},
{
"x": 1728518400000,
"y": 21.072991020032006
},
{
"x": 1728604800000,
"y": 20.796684319595006
},
{
"x": 1728864000000,
"y": 21.049965461661994
},
{
"x": 1728950400000,
"y": 22.196638268478
},
{
"x": 1729036800000,
"y": 22.864379461202006
},
{
"x": 1729123200000,
"y": 22.634123877504006
},
{
"x": 1729209600000,
"y": 23.679484227492996
},
{
"x": 1729468800000,
"y": 23.481464425512005
},
{
"x": 1729555200000,
"y": 23.453833755469006
},
{
"x": 1729641600000,
"y": 22.689385217592008
},
{
"x": 1729728000000,
"y": 23.237393506792998
},
{
"x": 1729814400000,
"y": 22.615703430808008
},
{
"x": 1730073600000,
"y": 22.583467649089997
},
{
"x": 1730160000000,
"y": 23.145291273312996
},
{
"x": 1730246400000,
"y": 22.924245912963
},
{
"x": 1730332800000,
"y": 22.57886253741701
},
{
"x": 1730419200000,
"y": 21.376928390513005
},
{
"x": 1730678400000,
"y": 21.842044669582993
},
{
"x": 1730764800000,
"y": 21.261800598664994
},
{
"x": 1730851200000,
"y": 21.455215288970994
},
{
"x": 1730937600000,
"y": 23.057794151508006
},
{
"x": 1731024000000,
"y": 22.040064471563
},
{
"x": 1731283200000,
"y": 23.200552613400998
},
{
"x": 1731369600000,
"y": 24.12157494819199
},
{
"x": 1731456000000,
"y": 23.435413308773004
},
{
"x": 1731542400000,
"y": 22.887405019571997
},
{
"x": 1731628800000,
"y": 22.758461892700996
},
{
"x": 1731888000000,
"y": 21.459820400645004
},
{
"x": 1731974400000,
"y": 20.326962928851007
},
{
"x": 1732060800000,
"y": 19.52567349758199
},
{
"x": 1732147200000,
"y": 20.557218512549007
},
{
"x": 1732233600000,
"y": 20.607874740961996
},
{
"x": 1732492800000,
"y": 22.445314298872
},
{
"x": 1732579200000,
"y": 23.067004374856005
},
{
"x": 1732665600000,
"y": 23.278839511858006
},
{
"x": 1732752000000,
"y": 23.039373704812007
},
{
"x": 1732838400000,
"y": 23.067004374856005
},
{
"x": 1733097600000,
"y": 23.099240156573998
},
{
"x": 1733184000000,
"y": 24.153810729910003
},
{
"x": 1733270400000,
"y": 23.914344922864004
},
{
"x": 1733356800000,
"y": 24.64195256735
},
{
"x": 1733443200000,
"y": 24.64655767902401
},
{
"x": 1733702400000,
"y": 25.489293115357995
},
{
"x": 1733788800000,
"y": 25.194565968224996
},
{
"x": 1733875200000,
"y": 24.959705272853007
},
{
"x": 1733961600000,
"y": 25.028781947962
}
],
"color": "#24374D",
"name": "text)"
}
],
"credits": {
"enabled": false
},
"legend": {
"enabled": false
},
"responsive": {
"rules": [
{
"condition": {
"maxWidth": 800
},
"chartOptions": {
"xAxis": {
"labels": {
"step": 2
}
}
},
"_id": "highcharts-xjgridm-1"
},
{
"condition": {
"maxWidth": 500
},
"chartOptions": {
"xAxis": {
"labels": {
"step": 2
}
}
},
"_id": "highcharts-xjgridm-2"
}
]
}
}

[andrzej.b]

Hi,

Thanks for contacting us with your question!
Your config looks good, setting marker.enabled to false should be enough; you can add an extra option: set states.hover.enabled to false to totally turn off hover effects. If the issue persists, it might be related to caching or a specific browser behavior, so clearing the cache or testing in different browsers might help identify the cause.
Let me know if this solves your issue or if there's anything else you'd like to try!

Kind regards,

[branko]

setting marker.enabled to false should be enough; you can add an extra option: set states.hover.enabled to false to totally turn off hover effects. If the issue persists, it might be related to caching or a specific browser behavior, so clearing the cache or testing in different browsers might help identify the cause.
Let me know if this solves your issue or if there's anything else you'd like to try!

Kind regards,

The marker was already set to false in the options:
"plotOptions": {
"areaspline": {
"marker": {
"enabled": false
},
"lineWidth": 1,
"states": {
"hover": {
"lineWidth": 1
}
},
"fillOpacity": 0,
"threshold": null,
"showInLegend": false
}


I've set the plotOptions.areaspline.states.hover.enabled = false
but now i don't have a marker indicating the location on the chart thats being viewed

Screenshot_8.png (30.22 KiB) Viewed 368 times

[andrzej.b]

Hi, I'm aware that marker was already set to enabled.false. It just seems that the issue is not related to the Highcharts, but something else, as it is not reproducible with pure Highcharts code. Hence I pointed you to other options.

Kind regards,

[branko]

Hello,

I've changed the hover state to be false as well, but it still continues showing me the markers.

I've recorder the case, I'm able to reproduce it when i change between data sets, primarily when i switch from the smallest one to the largest.
I use React Query for fetching, so i've disabled Cache thinking it might be that. But even then i keep receiving the same issue.

NOTE: this happens just plainly as well, sometimes. the way i reproduced is 100% always shows up the issue
https://youtu.be/YuxaYvkcadM

[andrzej.b]

Hi,

Again, there is nothing in the config that could cause it; looking at your recording, it seems that there is some issue with the chart rendering - it's not correctly redrawn after the data range change, please double-check your chart update logic.
To sum up - the config itself is not causing the issue, I was not able to reproduce the issue based on it; it appears that there is an issue with the chart redraw after the update - it's not working correctly. Please see the demo with highcharts stock module, where your config is implemented, and the range changes work smoothly: https://jsfiddle.net/BlackLabel/smxhwtv3/

Please see the chart.events.redraw API refefrence: https://api.highcharts.com/highcharts/c ... nts.redraw

Could you reproduce the issue in an online editor that I could work on?

Best,

[branko]

Could you provide me with a fiddle that uses reacthighcharts. I'm unable to find a working fiddle integration.

[andrzej.b]

For React example you need to use a different tool, like stackblitz or codesandbox