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.

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

Issue with region dasharray #3830

Closed
Monty9120 opened this issue Jul 5, 2024 · 1 comment
Closed

Issue with region dasharray #3830

Monty9120 opened this issue Jul 5, 2024 · 1 comment

Comments

@Monty9120
Copy link

Monty9120 commented Jul 5, 2024

Description

First of all, thank you for creating this library!

When using Regions with a large dataset (>600 datapoints) and enabling zoom, the dash-array does not render properly.

How can I ensure the stroke offset is consistent? For example if you add stroke-dasharray in CSS, it will automatically scale the line nicely.

Steps to check or reproduce

chart-zoom-issue

Example region setup:

{
    "region_id": [
        {
            "start": 65,
            "style": {
                "dasharray": "1 3"
            }
        }
    ]
}

Desired experience

The ideal look would be something like this, which is acheived with this CSS

.bb-chart-lines path.bb-line {
  stroke-dasharray: 11 !important;
}

chart-zoom-issue-fixed

@netil
Copy link
Member

netil commented Jul 9, 2024

Hi @Monty9120, in most cases if you don't need draw dashed lines on specific region, css stroke-dasharray is the best option.

The current implementation is drawing dashed lines in single path with the combination of move and line command. There're some limitation for accuracy. I'll go over it to improve this.

netil pushed a commit to netil/billboard.js that referenced this issue Jul 25, 2024
Improve dashed line rendering using css instead path command.
Will render same way for nullish value.

Ref naver#3830 naver#3790
@netil netil closed this as completed in 567b323 Jul 25, 2024
github-actions bot pushed a commit that referenced this issue Jul 25, 2024
# [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
# [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
Projects
None yet
Development

No branches or pull requests

2 participants