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

Rendering issue in bar chart when using bar -> radius -> ratio #2642

Closed
Nicolas469 opened this issue Apr 16, 2022 · 7 comments
Closed

Rendering issue in bar chart when using bar -> radius -> ratio #2642

Nicolas469 opened this issue Apr 16, 2022 · 7 comments
Labels
question

Comments

@Nicolas469
Copy link
Contributor

Description

Rendering issue in bar chart when using bar -> radius -> ratio.
This arises only when we update a value to "0".

Steps to check or reproduce

Just check this example: https://stackblitz.com/edit/21bdn7?file=index.ts then uncomment line 23 to see the bug.
@netil netil added the question label Apr 18, 2022
@netil
Copy link
Member

netil commented Apr 18, 2022 •
edited
Loading

Hi @Nicolas469, from the example you shared, the data.labels.centered option is used.
When this option is set, it means data label texts appearing on each bars, positioned vertically centered.

If you want hide the text, just set data.labels=false or set formatter function as below.

data: {
    labels: {
      format: v => v > 0 ? v : ""
   }
}

@Nicolas469
Copy link
Contributor Author

Hi,

I've tried data.labels=false and format: v => v > 0 ? v : "" but I've got the same bug.
It's only when I comment the "ratio": 0 that the problem disapear.

netil added a commit to netil/billboard.js that referenced this issue Apr 22, 2022
@netil
fix(bar): fix bar radius for zero value
a58d2ee 
In a process where values dynamically change from positive
value to zero, the transition appears wrongly if the Arc command
removed from the exist path.
To mitigate, maintain Arc command from path on this data flow.

Ref naver#2642
@netil netil mentioned this issue Apr 22, 2022
Merged
@netil
Copy link
Member

netil commented Apr 22, 2022

@Nicolas469, there was misunderstanding on this.
I think you pointed the issue when the data dynamically updates from some positive value to zero, during the transition appears some broken shape during the changes.

It happens, because the rounded shape contains arc path data, but when going to data zero it removes arc path data. Where the issue comes from.

I'll be trying fix(or mitigate) the broken shape's transition.

@netil netil closed this as completed in 9aa7579 Apr 27, 2022
github-actions bot pushed a commit that referenced this issue Jun 9, 2022
@semantic-release-bot
chore(release): 3.5.0-next.1 [skip ci]
93aa145 
# [3.5.0-next.1](3.4.1...3.5.0-next.1) (2022-06-09)

### Bug Fixes

* **bar:** fix bar radius for zero value ([9aa7579](9aa7579)), closes [#2642](#2642)
* **build:** Fix this keyword transpile ([b65531a](b65531a)), closes [#2671](#2671) [#2664](#2664) [#2665](#2665) [#2666](#2666) [#2667](#2667)
* **data:** Fix data label position on inverted axis ([b024d83](b024d83)), closes [#2700](#2700)
* **grid:** Fix y grid to show for log axis type ([d0b8cbd](d0b8cbd)), closes [#2710](#2710)
* **plugin:** fix sparkline dimension & tooltip ([79e1ab7](79e1ab7)), closes [#2682](#2682)
* **plugin:** fix stanford tooltip formatting ([9a87464](9a87464)), closes [#2657](#2657)
* **resize:** Fix legend resize ([7df949b](7df949b)), closes [#2650](#2650)
* **scale:** fix getting tickOffset ([3091677](3091677)), closes [#2669](#2669)
* **size.axis:** fix truncated axis when has no data ([40f4b66](40f4b66)), closes [#2675](#2675)
* **types:** Fix `Chart.load({ json })` typing ([1bd4f4a](1bd4f4a)), closes [#2711](#2711)
* **types:** Fix the signature of the tick format callback for timeseries ([c9c76e5](c9c76e5)), closes [#2676](#2676)
* **types:** Fix the type for options.data.names ([e64f6bd](e64f6bd)), closes [#2677](#2677)
* **types:** Fix types for the tooltip contents callback ([a0c0355](a0c0355)), closes [#2693](#2693)
* **zoom:** fix wheel zoom feeling "stuck" when panning past the edge ([50ed640](50ed640)), closes [#2588](#2588) [#2648](#2648)

### Features

* **data:** Intent to ship data.labels.rotate ([7b7ee08](7b7ee08)), closes [#2662](#2662)
* **module:** Support dual CJS/ESM package ([437c007](437c007)), closes [#2202](#2202)
* **plugin:** Intent to ship TableView plugin ([215b611](215b611)), closes [#1873](#1873)
* **resize:** Intent to ship resize.timer ([#2712](#2712)) ([0a07de0](0a07de0)), closes [#2650](#2650)
github-actions bot pushed a commit that referenced this issue Jun 30, 2022
@semantic-release-bot
chore(release): 3.5.0 [skip ci]
3f47375 
# [3.5.0](3.4.1...3.5.0) (2022-06-30)

### Bug Fixes

* **bar:** fix bar radius for zero value ([9aa7579](9aa7579)), closes [#2642](#2642)
* **build:** Fix this keyword transpile ([b65531a](b65531a)), closes [#2671](#2671) [#2664](#2664) [#2665](#2665) [#2666](#2666) [#2667](#2667)
* **data:** Fix data label position on inverted axis ([b024d83](b024d83)), closes [#2700](#2700)
* **grid:** Fix y grid to show for log axis type ([d0b8cbd](d0b8cbd)), closes [#2710](#2710)
* **option:** Fix onresize/onresized call context ([3ef9684](3ef9684)), closes [#2726](#2726)
* **plugin, type:** fix TextOverlap type definition ([80cc3b7](80cc3b7))
* **plugin:** fix sparkline dimension & tooltip ([79e1ab7](79e1ab7)), closes [#2682](#2682)
* **plugin:** fix stanford tooltip formatting ([9a87464](9a87464)), closes [#2657](#2657)
* **resize:** Fix legend resize ([7df949b](7df949b)), closes [#2650](#2650)
* **scale:** fix getting tickOffset ([3091677](3091677)), closes [#2669](#2669)
* **size.axis:** fix truncated axis when has no data ([40f4b66](40f4b66)), closes [#2675](#2675)
* **types:** Fix `Chart.load({ json })` typing ([1bd4f4a](1bd4f4a)), closes [#2711](#2711)
* **types:** Fix the signature of the tick format callback for timeseries ([c9c76e5](c9c76e5)), closes [#2676](#2676)
* **types:** Fix the type for options.data.names ([e64f6bd](e64f6bd)), closes [#2677](#2677)
* **types:** Fix types for the tooltip contents callback ([a0c0355](a0c0355)), closes [#2693](#2693)
* **zoom:** fix wheel zoom feeling "stuck" when panning past the edge ([50ed640](50ed640)), closes [#2588](#2588) [#2648](#2648)

### Features

* **area:** add option to render area below line ([cf60291](cf60291)), closes [#2740](#2740) [#2741](#2741)
* **data:** Intent to ship data.labels.rotate ([7b7ee08](7b7ee08)), closes [#2662](#2662)
* **option:** Intent to ship boost.useCssRule ([4a060d6](4a060d6)), closes [#2716](#2716)
* **option:** Intent to ship boost.useWorker ([eeaf8bd](eeaf8bd))
* **resize:** Intent to ship resize.timer ([#2712](#2712)) ([0a07de0](0a07de0)), closes [#2650](#2650)
@Nicolas469
Copy link
Contributor Author

The issue has been fixed but not when data are groupped: https://stackblitz.com/edit/21bdn7?file=index.ts

@Nicolas469
Copy link
Contributor Author

Any news for this bug ?

@netil netil reopened this Mar 3, 2023
netil pushed a commit to netil/billboard.js that referenced this issue Mar 3, 2023
fix(bar): Fix broken bar shape transition with grouped radius option
a5b6527 
During the path data update with arc command, include arc path data
even isn't arc type shape to prevent broken shape rendering during the transiton.

Ref naver#2642
netil pushed a commit to netil/billboard.js that referenced this issue Mar 3, 2023
fix(bar): Fix broken bar shape transition with grouped radius option
6f1f170 
During the path data update with arc command, include arc path data
even isn't arc type shape to prevent broken shape rendering during the transition.

Ref naver#2642
@netil netil mentioned this issue Mar 3, 2023
Merged
@netil netil closed this as completed in 600df46 Mar 3, 2023
@netil
Copy link
Member

netil commented Mar 3, 2023

@Nicolas469 fixed the issue.

@Nicolas469
Copy link
Contributor Author

Nice, thank you !

github-actions bot pushed a commit that referenced this issue Mar 6, 2023
@semantic-release-bot
chore(release): 3.7.5 [skip ci]
a5fd308 
## [3.7.5](3.7.4...3.7.5) (2023-03-06)

### Bug Fixes

* **bar:** Fix broken bar shape transition with grouped radius option ([600df46](600df46)), closes [#2642](#2642)
* **data:** Fix tooltip event bound when data.xSort=false set ([aa4afc3](aa4afc3)), closes [#3100](#3100)
* **data:** mitigate bar/bubble ranged data to handle data length than needed ([51603ec](51603ec)), closes [#3096](#3096)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@netil @Nicolas469