New to VX, Group is Rendering all Violin/Box-plots On Top of Eachother

[nappernick]

I've built a violin & box-plot in Javascript that displays correctly, now trying to create a visualization showing a set of violin & box-plots, using the Group, which sits above the data.map - those individual charts are each rendering correctly, but all of them sit atop each other. I'm using this codebox sample (https://codesandbox.io/s/epic-khayyam-64wkx?file=/Example.tsx:4055-4056), and though I'm not super confident with TypeScript, I think I understand what the code should be doing. In the codebox I'm not seeing any lines specifying spacing, other than possibly the passed in value for top in the Group component. Any ideas as to what is causing each mapped violins & box-plots to sit atop each other?

Any help would be much appreciated for a noob to the package!

[hshoff]

Hi @nappernick,

You can use a nested <Group top={number} left={number}> that wraps the violin & box-plots and positions them relative to the parent :

<Group top={40}>
  {data.map((d: Stats, i) => (
    <Group key={i} top={50 * i} left={10 * i}>
      {/* stuff */}
    </Group>
  ))}
</Group>

Thanks for checking out visx and hope this helps!