Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

wrong x-coordinate for tooltip when chart has left padding #3473

Closed
michkami opened this issue Oct 19, 2023 · 3 comments
Closed

wrong x-coordinate for tooltip when chart has left padding #3473

michkami opened this issue Oct 19, 2023 · 3 comments
Labels
bug patch

Comments

@michkami
Copy link
Collaborator

Description

Using padding_left leads to wrong calculation of the x-coordinate for the tooltip when current x position of the mouse + tooltip width is wider than the cahrt.

As you can see in the screenshot below, the tooltip is positioned far too left (the last bar is hovered)
grafik

Without padding it is positioned correctly next to the bar.
grafik

This seems to happen since #1267 and change in this line

Steps to check or reproduce

Link to jsfiddle
@netil netil added the bug label Oct 20, 2023
@netil
Copy link
Member

netil commented Oct 20, 2023

@michkami confirmed the issue. Thanks for the report.

netil pushed a commit to netil/billboard.js that referenced this issue Oct 23, 2023
fix(tooltip): Fix wrong tooltip position with padding option
6f66aa7 
Reflect padding top/left option on tooltip positioning.

Ref naver#3473
@netil netil mentioned this issue Oct 23, 2023
Merged
@netil netil closed this as completed in 041e144 Oct 23, 2023
github-actions bot pushed a commit that referenced this issue Oct 23, 2023
@semantic-release-bot
chore(release): 3.10.0-next.6 [skip ci]
e93f78a 
# [3.10.0-next.6](3.10.0-next.5...3.10.0-next.6) (2023-10-23)

### Bug Fixes

* **point:** Fix data.onclick not called when point.senstivity is radius ([83b0206](83b0206)), closes [#3466](#3466)
* **tooltip:** Fix wrong .tooltip.show() on rotated axis ([9b90c81](9b90c81)), closes [#3476](#3476)
* **tooltip:** Fix wrong tooltip position with padding option ([041e144](041e144)), closes [#3473](#3473)
* **zoom:** Fix initial error empty data with zoom ([a94d09c](a94d09c)), closes [#3470](#3470)

### Features

* **theme:** Add new modern theme ([b0f1aa7](b0f1aa7))
github-actions bot pushed a commit that referenced this issue Oct 25, 2023
@semantic-release-bot
chore(release): 3.10.0 [skip ci]
f5d258b 
# [3.10.0](3.9.4...3.10.0) (2023-10-25)

### Bug Fixes

* **api:** Fix to return indexed categories ([1209138](1209138)), closes [#3365](#3365)
* **axis:** Fix axis.x.height=0 to be applied ([0c562c3](0c562c3)), closes [#3424](#3424)
* **axis:** Fix x axis tick text overlap with legend ([796671f](796671f)), closes [#3485](#3485)
* **bar:** Fix stacking bar position on multiple xs ([674bad1](674bad1)), closes [#3372](#3372)
* **candlestick:** Fix rendering on rotated axis ([fe4c04b](fe4c04b)), closes [#3387](#3387)
* **clip:** Fix x axis hide on title.bottom ([d00052c](d00052c)), closes [#3364](#3364)
* **domain:** fix trimXDomain not trimming min ([bacc287](bacc287)), closes [#3420](#3420)
* **labels:** Fix index argument for nullish value ([13d1077](13d1077)), closes [#3547](#3547)
* **option:** Fix inconsistency of padding ([694aa34](694aa34)), closes [#3426](#3426)
* **point:** Fix data.onclick not called when point.senstivity is radius ([83b0206](83b0206)), closes [#3466](#3466)
* **point:** Fix pointFucusOnly check error ([f9b65ac](f9b65ac)), closes [#3407](#3407) [#3456](#3456)
* **point:** Fix rendering error when point.focus.only=true is set ([787fd15](787fd15)), closes [#3406](#3406)
* **shape:** Fix circleY() undefined error ([d245853](d245853)), closes [#3388](#3388)
* **subchart, zoom:** Fix returning domain value ([321510b](321510b)), closes [#3347](#3347)
* **subchart:** Fix handlebar position ([83ef6d0](83ef6d0)), closes [#3358](#3358)
* **title:** fix title text center align ([b0fc214](b0fc214)), closes [#3363](#3363)
* **tooltip:** Fix tooltip.format.value call ([2e88484](2e88484)), closes [#3371](#3371)
* **tooltip:** Fix tootip display on tooltip.init ([52083bf](52083bf)), closes [#3369](#3369)
* **tooltip:** Fix wrong .tooltip.show() on rotated axis ([9b90c81](9b90c81)), closes [#3476](#3476)
* **tooltip:** Fix wrong tooltip position with padding option ([041e144](041e144)), closes [#3473](#3473)
* **zoom:** Fix initial error empty data with zoom ([a94d09c](a94d09c)), closes [#3470](#3470)

### Features

* **api:** Intent to ship subchart method ([ac9e229](ac9e229)), closes [#3342](#3342)
* **plugin:** Add nullString option ([29bdb0c](29bdb0c)), closes [#3412](#3412) [#3413](#3413)
* **point:** Intent to ship point.radialGradient ([7b51fd6](7b51fd6)), closes [#3405](#3405)
* **regions:** Intent to ship regions.label ([0496ec6](0496ec6)), closes [#3319](#3319)
* **theme:** Add new modern theme ([b0f1aa7](b0f1aa7))
* **tooltip:** Provide y position for tooltip position callback ([a793a2e](a793a2e)), closes [#3434](#3434)
@creage
Copy link

creage commented Oct 26, 2023

@netil This change to getSvgLeft function breaks our donut charts tooltips

billboard.js:7481 Uncaught TypeError: Cannot read properties of undefined (reading 'text')
    at ChartInternal.getSvgLeft (billboard.js:7481:1)
    at ChartInternal.getTooltipPosition (billboard.js:8661:1)
    at ChartInternal.setTooltipPosition (billboard.js:8634:1)
    at ChartInternal.showTooltip (billboard.js:8742:1)
    at selectArc (billboard.js:17708:1)
    at SVGPathElement.eval (billboard.js:17740:1)
    at SVGPathElement.eval (on.js:3:14)

because our $$.config doesn't have any axis_y_label property.

@netil
Copy link
Member

netil commented Oct 26, 2023

@creage confirmed the issue. I'll release the patch soon.

@netil netil added the patch label Oct 26, 2023
netil pushed a commit to netil/billboard.js that referenced this issue Oct 26, 2023
fix(tooltip): Fix tooltip error on Arc type
979622d 
Side effect caused by naver#3475.
The condition set where valid only for axis based chart

Ref naver#3473 (comment)
@netil netil mentioned this issue Oct 26, 2023
Merged
netil pushed a commit to netil/billboard.js that referenced this issue Oct 26, 2023
fix(tooltip): Fix tooltip error on Arc type
8106e14 
Side effect caused by naver#3475.
The condition set where valid only for axis based chart

Ref naver#3473 (comment)
netil added a commit that referenced this issue Oct 26, 2023
@netil
fix(tooltip): Fix tooltip error on Arc type
5e80d9d 
Side effect caused by #3475.
The condition set where valid only for axis based chart

Fix #3473 (comment)
github-actions bot pushed a commit that referenced this issue Oct 26, 2023
@semantic-release-bot
chore(release): 3.10.1 [skip ci]
0ca73a4 
## [3.10.1](3.10.0...3.10.1) (2023-10-26)

### Bug Fixes

* **tooltip:** Fix tooltip error on Arc type ([5e80d9d](5e80d9d)), closes [#3475](#3475) [/github.com//issues/3473#issuecomment-1781091685](https://github.com//github.com/naver/billboard.js/issues/3473/issues/issuecomment-1781091685)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug patch
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@creage @netil @michkami