[Bug] Styling Changes when Custom Axis Tooltip is enabled on Stacked Area Chart

[henrikcs]

Version

6.0.0

Link to Minimal Reproduction

https://codepen.io/henrikcs/pen/KwMaObe

Steps to Reproduce

In the minimal reproduction, hover over the areas.
All areas will turn darkblue instead of keeping their color. Hover behavior is also unexpected and feels sluggish.

Click on "Custom Tooltip ENABLED" in the upper right corner to disable the Axis-Tooltip.
The Stacked Area Chart now has the expected styles and behavior.

Current Behavior

When hovering over one of the areas, all of the areas change colors.
(In the given codepen when "Custom Tooltop" is "ENABLED")

Expected Behavior

The Axis Tooltip has no influence on the colors of other areas.

Environment

- OS: Ubuntu 24.04
- Browser: Firefox
- Framework: Angular, but also without Framework as exemplified in the given Codepen

Any additional comments?

I want to render a plot potentially a lot of lines.
The plot is of type "Stacked Area Chart".
Each Area represents some data with some name.
On hover over an Area, we want to show the name of the piece of data which corresponds to the Area.
Since this is not natively possible (see #21280), i wanted to implement a workaround.

This workaround consists of a mouseover listener. Once the mouse hovers over an area, a custom tooltip is shown with a trigger on axis, in which a the name attribute corresponding to the area is rendered.
When hovering outside of any area, the tooltip's trigger is reset to none.

The unexpected behavior happens when there is a lot of data points on the chart. It might also depend on the individual computational power of the underlying system: When viewed in a VM, the unexpected behavior can even be seen with less data points, than on my host machine (Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz).

Is this an issue with my approach to solve the problem of there being no native tooltip when hovering over an area of a tooltip? Is there a better way to achieve my desired behavior? Or is there an underlying problem with the renderer (as maybe indicated in #21304)?

[developerzohaib786]

@henrikcs can you please specify this issue or can provide some screenshots or videos that will help a lot

[developerzohaib786]

I am taking about the position where it is happening not the codepen code to verify it.
it will help me a lot to solve this issue.

[henrikcs]

Sure!

Here is a video of the Areas being styled as expected when hovering over them with my mouse cursor. This is how it should look like. The only thing that is missing is a Tooltip having information on the currently hovered Area.

2026-01-23.09-51-44.mp4

Here is a video of the Areas being unexpectedly highlighted when hovering over them with my mouse cursor. The tooltip however, is behaving as expected, showing information about the currently hovered Area.
You can see the colors of the areas change simultaneously, as I move my mouse over a single area, which should not be the case.

2026-01-23.09-51-25.mp4

[helgasoft]

Event highlight should provide data for the line area hovered. Custom controlling mousemove would invite more problems.

I think there is a bug with tooltip. When tooltip: {trigger:'axis'} and all series have emphasis: {focus: 'series'} , then event highlight is generated with data, but when trigger:'item' the event is not generated.
Demo