apache / apache/echarts

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

Open
#21,482 4 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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

```markdown
- 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)?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.