BarGroup with null bar values

[youngandinnocent]

Hi there!

I am trying to work with BarGroup.

Is it possible to remove null bars from a group so that there is no distance between existing bars equal to the width of the bar?

Link to codesandbox with your examples where I modified the data to reproduce my problem

Thanks for library

[lucassarcanjo]

I'm with the exactly same challenge but in XYChart.

This lib is awesome!

[williaster]

Hey @youngandinnocent 👋 thanks for checking out visx. I don't think this is possible because of how it is implemented with d3. You can think of grouped bars as using two scales:

• an outer scale to position the groups of bars along the x-axis (dates, here), and
• a second inner scale to offset the bars for each group within a date position:

An implication is that every inner scale is the same, and thus you can't position them different in one group versus another. I believe this is a limitation in d3 as well. Going to close this, if anyone thinks they have an approach to fix it please feel free to reopen.

[iampueroo]

@youngandinnocent @lucassarcanjo

Note: this logic has nothing to do with visx, so this issue should remain closed and no PR should be added for this issue (IMO).

While the bar group behavior you're looking for is unexpected (if it were me I'd keep everything in the same x position, even with missing data), you actually DO have all the data you need to "redo" the inner scale that @williaster mentioned above - all you need is the x positions and width of each group (and then derive the margin), and then it's just a bit of Math to "redo" the inner scale. I suspect there may d3 utilities that can make this easier, but here is an example implementation: https://codesandbox.io/s/stoic-ritchie-f8yoe?file=/Example.tsx:2584-3940 (warning, i'd test this with invalid data as it's making some assumptions on the input data).

Again, I'm just sharing a possible solution to your problem, this type of logic shouldn't exist in the visx

[youngandinnocent]

@iampueroo thanks for your example. I liked that I tried to modify it a little 😊 https://codesandbox.io/s/dank-sun-6uosk?file=/Example.tsx:2605-4467 I'm not sure if I did well.

I previously implemented a solution in which I sorted the bars and calculated group offset left so that it is centered https://codesandbox.io/s/vigilant-johnson-7jc29?file=/Example.tsx:2320-3827