How do I add a secondary Y axis to my vega-lite chart?

Question

This question shows a way to add multiple time series to a vega-lite chart:

How to plot several variables on an axis with Vega-Lite?

Is there a way to put the second series on the secondary Y axis? I'm talking about putting another Y axis on the right hand side so that the time series can have different scales but still be compared.

The following image demonstrates the kind of chart that I'm after:

Here is an example chart, please show me how to move the second time series to a new Y axis on the right of the chart:

https://vega.github.io/editor/#/gist/vega-lite/ashleydavis/3dbd3b83f2a67da8fe20ef444fd4958e

Update:

I have partially solved my problem, but not 100%.

By adding "axis" and "orient" fields to my vega-lite chart I've been been able to move the second series to the right hand side as you can see here:

https://vega.github.io/editor/#/gist/vega-lite/ashleydavis/5aea58ee98c2eec9913b309836181a5b

The problem I'm having now is that the when I try to create a chart like this with two different time series with values on completely different scales I get something that isn't useful.

You can see from this chart that both sides of the chart use the same scale and this makes it impossible to compare the data because the first series (which is on a smaller scale) ends up being completely squashed.

You can see the chart from the screenshot here:

https://vega.github.io/editor/#/gist/vega-lite/ashleydavis/af1958d3f22bd876959ebcc97105dd14

So the question now is how do I make these axis' independent so the data is overlaid and easily comparable?

(Not that it makes sense to compare the data in this example, but generally I need to be able to do this).

Singlehanded

Maybe @schuemax's Vega approach can be ported to Vega Lite - https://mcmap.net/q/2034515/-vega-plot-with-secondary-y-axis – Dispirit

That's what I'm after, although I'm not sure how to translate this to Vega Lite. – Singlehanded

Answer 1

Yes, you can set axes and scales to be independent with the resolve property. Vega-Lite will automatically create two axes for you.

See https://vega.github.io/vega-lite/docs/layer.html#combined-scales-and-guides.

Jarvis

I tested it out before I set this as the answer, result here: vega.github.io/editor/#/gist/vega-lite/ashleydavis/… – Singlehanded

How can I combine this with the scale zoom and pan option as shown in vega.github.io/vega-lite/examples/…? Looks like not supported. If I add the selection node then I get an error about the layer node. – Tai

Does anyone know if this is possible within voyageur2? – Heuser