[XYChart] - Border radius on a barStack

[maximerivolet]

Hello,

I'm using XYChart to display barStacks. I would like to have a border radius :

• on the bottom of each first rect
• on the top of each last rect

My problem is that I can't manage to establish which rect are first and which rect are last on a barStack.

Do you have any advice for this ?

Regards,

[williaster]

Hey @GoldenIvan 👋 currently this isn't possible, there's a related request in #1092 with a workaround to apply a border radius to all corners (which I realize is not what you want). I think we could add the functionality to all bar components (Bar, BarGroup, BarStack) since there seems to be the desire to modify the aesthetics in that way.

[williaster]

in our barStack, we have not every values on every bars. So the last bar is not always the same.

ahhh, yes this is more complicated. Thanks for mentioning this! I think the probably means it should be set-able per bar through an accessor function or something. will hold off on merging #1098 so we don't have a subsequent breaking API change, will try to work in this requirement.

[maximerivolet]

Hi @williaster,

I saw that the PR #1098 was merged. I tested it, and this isn't applying the radius only for the bar on the top, but all bars. Is there a way to adjust that ?

[williaster]

hmm, you tried these props in order to get this effect?

[maximerivolet]

Hi @williaster ! In my case, I've got a BarStack with a single BarSeries, like this :

<BarStack>
  {listSigles.map((sigle, i) => {
    return (
      <BarSeries
        key={`${sigle}-${i}`}
        dataKey={sigle}
        data={isRange && renderVertically ? dataAgeRange : dataAge}
        xAccessor={(data) =>
          renderVertically ? data.age : axisLeft ? data.groups[sigle].length : -data.groups[sigle].length
        }
        yAccessor={(data) => (renderVertically ? data.groups[sigle].length : data.age)}
        colorAccessor={() => getGroupColor(sigle, groups)}
      />
    )
  })}
</BarStack>

In my case, all bar series are not used on every bars. This is an example :

So, as I can't map all bar series, do you have a workaround for this case ?

[williaster]

hey @GoldenIvan , thanks for elaborating. I toyed around a bit with an example like that but unfortunately don't have a workaround as we didn't add per-bar support to the initial implementation. So this would require more work to support. Happy to review a PR if there is any interest.

[davidbarker]

I happened to see this question after replying to a similar issue and thought it might help you too.

Can you use a rounded rectangle as a mask for each stack? (I go into slightly more detail in the issue reply.)

#1475

[maximerivolet]

The problem is doing that imply to know where is the rectangle at the top of each stacks. I think it would be very complicated.

[davidbarker]

If I get time I'll see if I can code up an example that works. I haven't used BarSeries much so it'll be a good excuse to play with it.

[maximerivolet]

Be careful, BarSeries is a thing, but they are inside a BarStack, and we don't manage who is where, Visx is doing that for us.