search

airbnb / visx

🐯 visx | visualization components
https://airbnb.io/visx
MIT License
19.32k stars 709 forks source link

When using AreaStack around AreaSeries, the line glyphs and tooltip glyphs no longer render #1359

Open dbchristopher opened 2 years ago

dbchristopher commented 2 years ago

I am setting up an Area chart with some built-in glyph options for the line. Using the standard AreaSeries this renders as expected:

Screen Shot 2021-10-20 at 11 32 29 AM

However, when I wrap it in AreaStack, the glyphs no longer render:

Screen Shot 2021-10-20 at 11 32 52 AM

It would be great if the stacked area charts would also render the glyphs in their appropriate locations!

williaster commented 2 years ago

Hey @dbchristopher just to clarify, you are using GlyphSeries to render your glyphs before wrapping in the AreaStack?

Yes currently this isn't supported as AreaStack hijacks your rendering (the API makes it look like your AreaSeries etc. are still rendered but they are just used to extract props). So this would require some refactoring. We do actually already render glyphs in AreaStack to handle onFocus/onBlur events, they are just invisible.

I think overall my preferred approach to fix this would be to add renderGlyphs props to Area/LineSeries, which then could be respected by the AreaStack component as well. I don't have the bandwidth to add this any time soon but would review a PR if someone was interested!