Is layering XYcharts on top of each other possible?

[VigneshTrantor]

Hey guys,
I want to create something like this:

i.e. 2 different charts shown on top of each other.
Is this currently possible with XYCharts ?

[williaster]

this should be possible, I think you'd just need to absolutely position one in a container on top of the other. Two things that might be tricky are

1. matching the chart dimensions between the two if you need them to be responsive, because whichever you render inside an absolutely positioned container won't have any size on its own and would render with 0 width/height.
2. supporting Tooltips for both (ideally you would probably want a tooltip to show data points across both charts)

Something like this might work for 1) (untested)

import { ParentSize } from '@visx/responsive';
import { XYChart, ... } from '@visx/xychart';

// rendered inside of the container of choice, it will expand to 100% width/height
() => (
  <ParentSize>
    {({ width, height }) => (
      <>
        <XYChart width={width} height={height} {...propsAndChildren1} />
        <div style={{ position: 'absolute', top: 0, left: 0, width, height }}>
          <XYChart width={width} height={height} {...propsAndChildren2} />
        </div>
     </>
    )}
  </ParentSize>
)

For shared tooltips you could probably pull out the TooltipProvider and/or EventProvider as a parent of both charts (see advanced usage in the XYChart docs for more on those)

[VigneshTrantor]

Thanks @williaster . I'll check it out.

[VigneshTrantor]

I got it to work, but as you said, the tooltips were messed up. They don't work anymore. I'll try to use the TooltipProvider and/or EventProvider as suggested by you.