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

Regions are poorly rendered #3790

Closed
Blaumaus opened this issue May 29, 2024 · 1 comment
Closed

Regions are poorly rendered #3790

Blaumaus opened this issue May 29, 2024 · 1 comment
Labels
bug question

Comments

@Blaumaus
Copy link

On a line chart, regions are often poorly rendered (not as a straight line):

Screenshot 2024-05-29 at 19 35 36 Screenshot 2024-05-29 at 19 35 54

It's not a massive bug, but it catches an eye and spoils the UI a tiny bit.

There's also one more extreme example:
Screenshot 2024-05-29 at 19 37 41

Regions seem to be much more "clunky" compared to a regular line near them.

Could you please advice, maybe there's some kind of option I missed that may fix this? Or maybe some sort of shape-rendering: geometricprecision may be applied on regions to render them a bit better?

Thank you for building this beautiful library.
All the best!
@netil netil added the question label May 31, 2024
@netil
Copy link
Member

netil commented May 31, 2024

Hi @Blaumaus, thanks for the cheering message.
The apply of regions can make to render specific range as dashed is implemented as moving point and drawing line commands. And between these commands(and its coordinate) can possibly be overlapped, as your example.

One of the workaround or trick is rendering multiple dataseries separately, by dividing as normal and dashed.
And control dashed line with CSS style rather than path commands. It'll get more clear by checking below example.

netil pushed a commit to netil/billboard.js that referenced this issue Jul 9, 2024
fix(regions): Mitigate broken dashed lines rendering
e9c017c 
Prevent dashed lines coordinates to overflow

Ref naver#3790
@netil netil mentioned this issue Jul 9, 2024
Merged
@netil netil closed this as completed in d1df575 Jul 9, 2024
@netil netil added the bug label Jul 9, 2024
netil pushed a commit to netil/billboard.js that referenced this issue Jul 25, 2024
feat(regions): Enhance regions rendering
0433b1c 
Improve dashed line rendering using css instead path command.
Will render same way for nullish value.

Ref naver#3830 naver#3790
@netil netil mentioned this issue Jul 25, 2024
Merged
netil added a commit that referenced this issue Jul 25, 2024
@netil
feat(regions): Enhance regions rendering
567b323 
Improve dashed line rendering using css instead path command.
Will render same way for nullish value.

Fix #3830
Close #3790
github-actions bot pushed a commit that referenced this issue Jul 25, 2024
@semantic-release-bot
chore(release): 3.13.0-next.1 [skip ci]
023ea88 
# [3.13.0-next.1](3.12.4...3.13.0-next.1) (2024-07-25)

### Bug Fixes

* **api:** Fix to return indexed categories ([55c17c6](55c17c6)), closes [#3365](#3365)
* **bar:** Fix stacking bar position on multiple xs ([216da62](216da62)), closes [#3372](#3372)
* **candlestick:** Fix rendering on rotated axis ([17f5058](17f5058)), closes [#3387](#3387)
* **clip:** Fix x axis hide on title.bottom ([beec1bb](beec1bb)), closes [#3364](#3364)
* **option:** Fix inconsistency of padding ([0c1ce81](0c1ce81)), closes [#3426](#3426)
* **regions:** Mitigate broken dashed lines rendering ([d1df575](d1df575)), closes [#3790](#3790)
* **shape:** Fix circleY() undefined error ([f4ac3f1](f4ac3f1)), closes [#3388](#3388)
* **subchart, zoom:** Fix returning domain value ([90338ec](90338ec)), closes [#3347](#3347)
* **subchart:** Fix handlebar position ([b897cbb](b897cbb)), closes [#3358](#3358)
* **title:** fix title text center align ([b254a61](b254a61)), closes [#3363](#3363)
* **tooltip:** Fix tooltip.format.value call ([f7d587d](f7d587d)), closes [#3371](#3371)
* **tooltip:** Fix tootip display on tooltip.init ([98e6f8b](98e6f8b)), closes [#3369](#3369)

### Features

* **api:** Intent to ship subchart method ([976f04a](976f04a)), closes [#3342](#3342)
* **bar:** Enhance bar width to adjust from callback ([4ce74fc](4ce74fc)), closes [#3820](#3820)
* **module:** Support dual CJS/ESM package ([437c007](437c007)), closes [#2202](#2202)
* **plugin:** Intent to ship TableView plugin ([215b611](215b611)), closes [#1873](#1873)
* **regions:** Enhance regions rendering ([567b323](567b323)), closes [#3830](#3830) [#3790](#3790)
* **regions:** Intent to ship regions.label ([b4e3bc2](b4e3bc2)), closes [#3319](#3319)
* **shape:** Intent to ship area-step-range type ([03b9a7d](03b9a7d)), closes [#3776](#3776)
* **types:** Add area-step-range chart type ([2a763d2](2a763d2))
github-actions bot pushed a commit that referenced this issue Aug 23, 2024
@semantic-release-bot
chore(release): 3.13.0 [skip ci]
6a6c88d 
# [3.13.0](3.12.4...3.13.0) (2024-08-23)

### Bug Fixes

* **regions:** Mitigate broken dashed lines rendering ([d1df575](d1df575)), closes [#3790](#3790)
* **zoom:** Fix zoom wheel interaction ([81ea359](81ea359)), closes [#3856](#3856)

### Features

* **bar:** Enhance bar width to adjust from callback ([4ce74fc](4ce74fc)), closes [#3820](#3820)
* **legend:** Provide original data id in format callback ([5ce41c7](5ce41c7)), closes [#3663](#3663)
* **regions:** Enhance regions rendering ([567b323](567b323)), closes [#3830](#3830) [#3790](#3790)
* **shape:** Intent to ship area-step-range type ([03b9a7d](03b9a7d)), closes [#3776](#3776)
* **types:** Add area-step-range chart type ([2a763d2](2a763d2))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@netil @Blaumaus