Victory: Nesting a custom component inside VictoryChart

[willlma]

The Problem

I can't create a component that returns a Victory component and nest it inside a VictoryChart. I'm hoping to make a line and scatter inside a VictoryGroup and reuse it so I could put several of them in the same chart. See my Stackoverflow question

Reproduction

[boygirl]

Hi @willlma,

VictoryChart inspects the props of its children in order to calculate things like domain and scale. VictoryChart also expects to clone all of its children with new props so that things like domain are common across all children so that they display as a single chart. When your functional component is evaluated, VictoryChart gets access to children, so it works as expected. There are a few other strategies for wrapping components and creating custom components you can read about here: https://formidable.com/open-source/victory/guides/custom-components/

[willlma]

Thanks, @boygirl. In my testing I had tried passing all props down to VictoryLine, but it wasn't rendering. Thanks to your explanation, I realize that it's because the domain wasn't getting calculated correctly. I know I can create a custom domain, but curious as why the domain for my custom component isn't calculated in the same way as a standard component. See sandbox.