BarStack ability to add radius to only top of bars

[THAgility]

Hey Team,

I'm loving your stuff so far! One problem that I am having currently is with your BarStacks. In a normal bar or bar rounded you can specify a radius then top or bottom to get the radius only on the top or bottom of the bar.

This functionality doesn't seem to work with BarStacks. Is it possible to make just the top or bottom of the bars in the BarStack rounded? I tried using Clip-Path also, CSS, and Tailwind css to do it but none of them worked.

Maybe I'm just using your Clip-Path functionality wrong but it seems to only take a width and height variable.

Any help would be grateful.

[williaster]

hey @THAgility ! thanks for checking out visx 🙏

can you elaborate on which package(s) you're using? in particular @visx/xychart or the lower-level @visx/shape which also has a stack? if you're using @visx/xychart, this discussion might give you what you need.

if you're using @visx/shape, you'll need to use its custom children render function as a way to customize what it's rendering. It's default implementation uses Bars which are svg rects, and although those have rx/ry props, you can't set them on just the top or bottom. Because of this we have a custom shape BarRounded implemented as a path, which adds curves as needed. You'd then do something like

<BarStack {...}>
  {(bars) => (
    <Group className={cx('visx-bar-stack', className)} top={top} left={left}>
      {barStacks.map((barStack) =>
        barStack.bars.map((bar) => (
          <BarRounded
            key={`bar-stack-${barStack.index}-${bar.index}`}
            radius={bar.index === 0 || bar.index === BAR_COUNT ? myDesiredRadius : 0}
            top={bar.index === 0}
            bottom={bar.index === BAR_COUNT}
            {...}
          />
        )),
      )}
    </Group>
  )}
</BarStack>

[THAgility]

Hey williaster

Here is my code below. I'm using the shape package and barstack component. So I can just switch my rect element with a BarRounded? I'll give that a try!

<BarStack<any, stats>
            data={data}
            keys={keys}
            x={getXValue}
            xScale={xScale}
            yScale={yScale}
            color={colorScale}>
            {barStacks =>
              barStacks.map(barStack =>
                barStack.bars.map(bar => (
                  <rect
                    key={`bar-stack-${barStack.index}-${bar.index}`}
                    x={bar.x}
                    y={bar.y}
                    //ry={6}
                    height={bar.height}
                    width={bar.width}
                    fill={bar.color}
                    onMouseLeave={() => {
                      tooltipTimeout = window.setTimeout(() => {
                        hideTooltip()
                      }, 300)
                    }}
                    onMouseMove={event => {
                      if (tooltipTimeout) clearTimeout(tooltipTimeout)
                      // TooltipInPortal expects coordinates to be relative to containerRef
                      // localPoint returns coordinates relative to the nearest SVG, which
                      // is what containerRef is set to in this example.
                      const point = localPoint(event)
                      if (!point) return
                      showTooltip({
                        tooltipData: bar,
                        tooltipLeft: point.x,
                        tooltipTop: point.y,
                      })
                    }}
                  />
                )),
              )
            }
          </BarStack>

[THAgility]

Williaster that recommendation worked perfectly! I didn't know you could replace the rect objects with BarRounded etc! Thank you so much!