How to use DataProvider to sync charts with different yScale domains?

[MarkLyck]

I have some charts that I would like the user to be able to compare.

In the previous chart system I used a Dual Axis chart for this, but looking into it more, it seems like it's not recommended in visx and a great comment instead says to use DataProvider and EventEmitter to synchronize multiple charts together.

The docs provide an example here: https://codesandbox.io/s/linked-tooltips-7s0jz?file=/Example.tsx which by the way is broken and it needs to install @react-spring/web to work.

And I implemented that method in my charts without much issue:

However, the scale is completely wacky. Each chart normally has it's own y scale domain where I use yMin -5 and yMax +5 which produces charts that look like this:

Rather than the first screenshot where all the charts are flat because they naturally have different domains. But when using DataProvider it seems to override my individual yScale options on each chart?

For each chart I have a XYChart config like this:

<XYChart
      margin={{ top: 16, right: 0, bottom: 16, left: 32 }}
      width={undefined}
      height={height}
      xScale={{ type: 'time', paddingInner: 0.5 }}
      yScale={{ type: 'linear', domain: [yMinDomain, yMaxDomain], zero: false }}
      theme={customTheme}
    >

Which is being completely ignored after adding the DataProvider

Is it possible e.g. to set a yScale based on the dataKey?

[williaster]

Hey @MarkLyck thanks for checking out visx! I'm excited someone is using these advanced features, we use them internally and they can be quite powerful. (Thanks also for noting the linked tooltip example is broken, I just updated it 🙏 )

Here's an updated version of it where each chart has independent data – this probably should be the example we use in the docs actually. https://codesandbox.io/s/linked-tooltips-independent-data-vvesr0?file=/Example.tsx

The key difference is that the charts only have a shared EventEmitterProvider – not a shared DataProvider. The DataProvider handles collecting all the data from child series and computing scales, which means that if charts share this they will have a single scale across all data in all charts (unless the scale config is overwritten with an explicit domain specifying the limits, but it would still be shared across charts).

One note about using this with different x-axis values: the event emitter emits events at a given x/y position, so if your charts have different widths it may not work and if you have different x-axis values it may look something like this (note the chart with few points doesn't update as frequently as the others due to a given point being the "closest" point for a longer time as you move the cursor)

https://codesandbox.io/s/linked-tooltips-independent-data-forked-nctceq?file=/Example.tsx (messy code/didn't clean it up)

[MarkLyck]

@williaster This is fantastic, thank you so much for the prompt help and updating the exampels! 🚀

Really loving visx XYChart so far.