Custom chart help with VictoryStack

[andrew-silvernail]

Hi,

I am somewhat new to React using a custom Victory chart in an existing project.

The basic setup is:

<VictoryChart ... >

<VictoryAxis ...>
</VictoryAxis>


<VictoryAxis ...>
</VictoryAxis>

<VictoryScatter .../>

{ pre_initialized_components_toggled_on_and_off }

</VictoryChart>

My issue is the pre_initialized_components_toggled_on_and_off components do not fill up all of the available space in the custom chart. These consist of an array of VictoryGroups that wrap VictoryScatters and VictoryLines, where all of the scatter points and lines have generated y values. Looking over the docsVictoryStack sounded like it would help.

So now I have

<VictoryStack groupComponent={<VictoryClipContainer />} animate={{
  duration: 2000,
  onLoad: { duration: 1000 }
}}>
{
   pre_initialized_components_toggled_on_and_off
}
</VictoryStack>

which breaks the chart. Specifically some of my VictoryScatter points within the VictoryGroups get cloned (which I hear is what VictoryStack needs to do internally for re-scaling), and my flat VictoryLines get messed up as well.

I've attempted to recreate the problem in codesandbox.io. My example doesn't have quite the same behavior but it does "unflatten" my lines. I've added a few buttons to my example to demonstrate this behavior.

My question: is this setup supported to begin with? Is there a better way to solve my problem without using VictoryStack?