padding between series in stacked bar chart

[brownjedi]

Hi,

Thank you such an amazing visualization library. I'm having a blast using this.

I have a quick question, is it possible to do a padding between series in a Bar Stack XY chart?

Cheers,
Sai

[williaster]

hey @brownjedi 👋 thanks for checking out visx, glad you are enjoying it. bar padding in @visx/xychart is controlled by the scales, this concept is inherited from d3: https://github.com/d3/d3-scale#band-scales

so overall you'd set some combination of padding/paddingInner/paddingOuter on your xScale config and that should give you the results you want. here's a sandbox to tinker with.

<XYChart
  xScale={{
    type: "band",
    paddingInner: 0.5
    // paddingOuter: 5
    // padding: 0, // use this to set inner + outer to the same value
  }}
  {...}
>

[brownjedi]

hey @williaster

Thank you for the quick response. I was thinking about the vertical padding highlighted here. I was thinking one option would be to introduce a fake series and set the color white or transparent to get the desired effect, but was wondering if there is a better way to do it.