Can one use XYChart to create a dual axis plot?

[gonzoramos]

Hi @visx team!

First of all, I love this project and would like to use it for all my data vis needs :) - I have a question I hope you can help me with: I want to create a chart like this one

Do you know how I can do that with XYChart? If not, should I go from scratch using lower level @visx components?

Many thanks in advance!
-G

[sgianelli]

I'm trying to do something similar with a line atop a stacked bar chart right now and it seems like the main problem is no being able to specify 2 separate yScales at the XYChart level though I'm not sure how you would reconcile that wrt negative values in the data set. I feel like the chart from scratch is the best option.

[williaster]

currently this is not supported in @visx/xychart, as it only supports one x- and one y-axis. In terms of data vis "best practice," I would generally discourage charts with two y-axes as they are hard to interpret and you can often achieve a similar effect by stacking two charts with a shared x-axis range.

others have tried overlaying two XYCharts on top of each other, but one significant challenge is tooltip triggering. see these related discussions

• XYCharts shared tooltips not working on Layered charts #1165
• Is layering XYcharts on top of each other possible? #1161

another option I thought of would be to transform the data of one of the lines (say the red one) into the units of the other (the blue one), and then render a separate @visx/axis with a custom (red) scale. that's a decent amount of work, though, so doing a chart from scratch might be the easiest route.

[williaster]

going to convert this to a discussion