Setting stroke in BarSeries for xychart

[kjesle]

Hello!

I'm trying to add a stroke around my bars in BarSeries in @visx/xychart. It seems like BaseBarSeries does not return that as an option.

Are there other ways of setting the stroke for bars in a BarSeries or am I missing something?

[williaster]

hey @kjesle 👋 thanks for checking out visx. yikes, yes looks like some base svg props like stroke are not properly added in BaseBarSeries so we should get a fix out for this (I would note that the rounded bars are implemented with a path whereas the non-rounded/"typical" bars are implemented with a rect ... so we can't passthrough all e.g., all rect props.

fwiw, setting stroke={string} currently works, it just gives a type error. another alternative to styling is with the old-school css handle .visx-bar. Sandbox link.

[kjesle]

Thank you for a quick reply @williaster

I forgot to mention that I use the <BarSeries /> inside a <BarGroup />. Setting the fill and stroke manually there does nothing, but if I move the BarSeries it works.

I will continue with the inline css for now. Thanks!

[kjesle]

I had two <BarSeries /> within a <BarGroup />, but there were no way of distinguish those two. Here is how I did it with inline css:

<style>{`
    .visx-bar-group > path:nth-child(n+${dataA.length + 1}) {
                        stroke: red;
                        fill: blue;
                    }      
    `}</style>