apache / apache/echarts

[Bug] Tooltip textStyle lineHeight property assignment does not persist

Open
#20,391 1 comment 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

5.2.2

### Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/ntt82g

### Steps to Reproduce

1. When changing the line height value in the index.js in the tooltip
2. Open the popup in a new window to be able to use the developer tools.
3. Go to the sources tab in the developer tools
4. Use mouse to hover over bar chart to get a tooltip to show up
5. After the tooltip is present press the F8 key to pause the page
6. In the developer tools go to the Elements tab and find or select the tooltip HTML element
7. In examining the style attribute of the tooltip HTML element, you will see the '... font: italic bold 40px / 60px Papyrus; ...'
8. The 60px in this example is the line height. The lineHeight value only changes when updating the fontSize property.

### Current Behavior

no matter what the tooltip -> textStyle -> lineHeight property is set to, the resulting HTML element's style attribute, will be one and one half times the value of the tooltip -> textStyle -> fontSize property value.

### Expected Behavior

When specifying the tooltip -> textStyle -> lineHeight that the property is properly rendered in the resulting HTML element.
tooltip: {
textStyle: {
// Does not work
lineHeight: 40,
// Does work
fontFamily: "Papyrus",
fontStyle: "Italic",
fontSize: 40,
textBorderColor: "yellow",
backgroundColor: "orange",
fontWeight: "bold",
color: "red",
},
},

The above tooltip configuration should have the following resulting style in the HTML element:

### Environment

```markdown
- OS: Windows 11
- Browser: Brave Version 1.70.123 Chromium: 129.0.6668.89 (Official Build)
- Framework: Typescript Version 5.3.3
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox and its index.js, then reproduce the tooltip with the supplied textStyle settings. Inspect the generated tooltip element's style and compare the configured lineHeight with the rendered font shorthand; done means the resulting style reflects the specified lineHeight.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.