useBarPath is complicated to use - This aims to improve it

[ljukas]

Description

I have found <Bar /> and useBarPath cumbersome to use. Since by default the bars renders outside the graph and you have to push them in with domainPadding and when you do that the innerPadding prop no longer correctly matches the docs. InnerPadding = 0 will equal overlapping bars if an domainPadding is provided.

This pullRequest contains my modified version of useBarPath that always renders all bars inside the chartBounds.

This screenshot illustrates how it renders now. The border is the ChartBounds. The innerPadding prop is now a prop that defines how many pixels there are between each bar.

This is not a complete PR-yet. If this change is one that the community would like to adopt I will be more then happy to complete the PR. (This does not affect useBarGroupPath yet for example)

Here is the code to render the above Chart, (data excluded)

Type of Change

• Breaking change (fix or feature that would cause existing functionality to not work as expected)

How Has This Been Tested?

Not tested via tests yet, awaiting response from maintainers if I should complete the PR first

Checklist:

Will leave this here if I need it later :)

• I have included a changeset if this change will require a version change to one of the packages.
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• I have run yarn run check:code and all checks pass
• I have created a changeset for new features, patches, or major changes
• I have added tests that prove my fix is effective or that my feature works
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
victory-native-xl-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2023 2:53pm

[ljukas]

Another idea i have is that, using your original solution to draw the bars, instead of providing a innerPadding value (since its a fraction and hard to work with), you instead provide a barWidth to the bar component. This would make it really easy to make the bars fit. For example, with a barWidht of 40 you would use domainPadding of {left:20,right:20} to make the bar bar fit the graph perfectly.