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

Bars overlapping where expected number of columns not present. #3030

Open
2 tasks done
leo411 opened this issue Jan 10, 2025 · 2 comments
Open
2 tasks done

Bars overlapping where expected number of columns not present. #3030

leo411 opened this issue Jan 10, 2025 · 2 comments
Labels
Issue: Accepted The submitted issue has been confirmed by the Victory core team Type: Bug 🐛 Oh no! A bug or unintentional behavior

Comments

@leo411
Copy link

leo411 commented Jan 10, 2025

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's Code of Conduct

Victory version

36.6.8

Code Sandbox link

https://codesandbox.io/p/sandbox/victory-minimum-example-overlapping-bars-forked-3vfxpp?file=%2Fsrc%2FApp.js%3A95%2C1-96%2C1

Bug report

Given a domain when the set of data provided to VictoryBar contains missing values the chart bars overlap.
In the Code Sandbox (link provided above), you'll be able to toggle between 3 scenarios and see the associated charts:

  • Discontinuous data - bars overlap
    Screenshot 2025-01-10 at 1 05 29 PM

  • Missing data subbed with zero - bars don't overlap
    Screenshot 2025-01-10 at 1 26 13 PM

  • Full data - bars don't overlap
    Screenshot 2025-01-10 at 1 26 30 PM

Steps to reproduce

Head to the code sandbox link I provided and toggle between the different scenarios (discontinuous data - bars overlap, missing data subbed with zero - bars don't overlap, full data - bars don't overlap) and see how the bars behave.

Expected behavior

In the context of a discontinuous set of data provided to VictoryBar the bars don't overlap in the graph.
We expect Victory to calculate and adjust the width of the bars given the dataset and the domain.

Actual behavior

In the context of a discontinuous set of data provided to VictoryBar the bars overlap in the graph.

Environment

- Device: Desktop
- OS: Sonoma 14.6.1
- Node: v16.17.1
- npm: 8.15.0
@leo411 leo411 added the Type: Bug 🐛 Oh no! A bug or unintentional behavior label Jan 10, 2025
@carbonrobot
Copy link
Contributor

Thank you for the detailed reproduction!

The problem appears to be the usage of barRatio, where using barWidth correctly infers the size in each scenario. We will look into how barRatio is calculated and see what's going on there. In the meantime, you might be able to use barWidth.

@carbonrobot carbonrobot added the Issue: Accepted The submitted issue has been confirmed by the Victory core team label Jan 10, 2025
@jufemaiz
Copy link

Looking into this a little, the use of a continuous scale is indicated where an interpolate function is available on the D3Scale type. Validating that this is not undefined would then allow to switch between assumptions of ordinal vs continuous scales.

The second part to this would be the need to manage bars widths assuming some level of either minimum or normalised "width" of the bar as presented on the continuous axis.

/~https://github.com/FormidableLabs/victory/blob/main/packages/victory-bar/src/bar-helper-methods.ts#L21-L27

This is where there are implicit assumptions for the bar width that cause the issue on continuous scales (that are not present with ordinal scales).

One could propose to adopt an explicit step-size, or one could derive an appropriate step size from the data (though that itself may be invalid, for example, where there's a single data point present but the domain exceeds the expected "width".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Issue: Accepted The submitted issue has been confirmed by the Victory core team Type: Bug 🐛 Oh no! A bug or unintentional behavior
Projects
None yet
Development

No branches or pull requests

3 participants