Multiple interdependent axes #5076

kricka91 · 2020-08-14T08:45:14Z

I would like to be able to create two y axes in a diagram, which are used for the same series, describing the y value in for example different units, such as in this example:
https://i.stack.imgur.com/ROFCo.png

As far as I can tell, there is currently no way of doing this the proper way (please correct me if I'm wrong). I don't think creating a duplicate series is an acceptable workaround as I don't want it to show up in the legend and I don't want the user to be able to hide the series and thus mess up one of the axes.

I would prefer there to be an option to link an axis to another axis rather than to a data series. The axes should remain in sync at all times as the user interacts in whatever way with the diagram.

This could theoretically be extended to more than two y axes, or to multiple x axes.

(Also, if you have any suggestions for good workarounds in the meantime, I would appreciate it.)

nicolaskruchten · 2020-08-14T12:37:02Z

We have support for this kind of thing via "fixed ratio axes" and "matched axes": https://plotly.com/javascript/axes/#fixedratio-axes and https://plotly.com/javascript/reference/layout/xaxis/#layout-xaxis-matches ... Do either of those meet your needs?

kricka91 · 2020-08-17T11:21:17Z

I've been trying them out for a bit and I eventually found a workaround, albeit not a very pretty one.

With fixedratio-axes I am able to keep a fixed ratio between a certain distance unit on the y axes, but the user can still scroll one of the axes without affecting the other, so that they become misaligned.

The matches option is interesting and does keep the axes in sync. However, all the values will match exactly, whereas I am interested in one axis being an "upscaled" version of the other. This feels, intuitively, like something that shouldn't be too hard to implement by extending the "matches" property. Matches seems to override the scaleanchor and scaleratio properties, so I cannot use them together.

It is possible, though, to use the matches property and formatting (https://github.com/d3/d3-format/blob/master/README.md) the text differently on different axes. By overriding the d3 locale formatter (#1464 (comment)), I was able to simply format a number as a totally different number.

<head>
	<!-- Load plotly.js into the DOM -->
	<script src='https://cdn.plot.ly/plotly-latest.min.js'></script>
</head>
<body>
	<div id='myDiv'><!-- Plotly chart will be drawn inside this DIV --></div>
</body>

var org_locale = Plotly.d3.locale;
Plotly.d3.locale = (locale) => {
  var result = org_locale(locale);
  var org_number_format = result.numberFormat;
  result.numberFormat = (format) => {
    const splits = format.split("_");
    if (splits[0] === "scale") {
      const k = parseFloat(splits[1]);
      const oldFormat = (splits.length > 2) ? splits[2] : "";
      return (x) => {
        return org_number_format(oldFormat)(x*k);
      }
    }
    else {return org_number_format(splits[0])}
  }
  return result;
}

var trace0 = {
  x: [0,1,2,3,4],
  y: [1,2,4,8,16],
  yaxis:"y"
}

var data = [trace0,{yaxis: "y2"}]

var layout = {
    width: 800,
    title: "fixed-ratio axes",
    yaxis: {
      title: "meters",
      rangemode: "tozero",
    },
    yaxis2: {
      matches: "y",
      title: "feet",
      side: "right",
      overlaying: "y",
      tickformat: "scale_"+(1/0.3048)+"_.2f"
    },
}

Plotly.newPlot('myDiv', data, layout)

Thanks a lot for the help, but I still think there is room for improvement so you don't have to rely on deceitful formatting.

nicolaskruchten · 2020-08-17T14:01:17Z

So this is pretty close, and works when box-zooming and panning: https://codepen.io/nicolaskruchten/pen/xxVOEaQ?editors=0010

I notice that grabbing and dragging the y-axis doesn't cause the y2-axis to pan, however... @alexcjohnson @archmoj is this a bug or is the box-zooming/panning a happy accident in this case?

alexcjohnson · 2020-08-17T22:28:56Z

That system is working as intended - when you zoom or pan via the plot area, there's nothing to tell you which specific axes on that area you wanted to alter, so it alters them all. But when you zoom or pan via one of the individual axes, we only change that one. This can be quite useful if, for example, you have several traces measuring different quantities entirely but you want to see if their features match up, you can slide and scale one of them over top of the other.

@kricka91 you make a good argument for why one might want matches and scaleratio together - though the word "matches" is a bit... stretched... if we continue to use that. But there's more to it in the general case, you may want an offset as well, like Celsius / Fahrenheit.

nicolaskruchten · 2020-08-17T22:52:20Z

Seems like "matches" is the wrong thing to use here... we probably just need a way to pin one axis' 0 to a level on the other. That would help with or without scaleratio in a few different circumstances actually.

alexcjohnson · 2020-08-17T23:02:33Z

pin one axis' 0 to a level on the other ... without scaleratio

While still allowing independent scaling (via zoom interactions)? This would be interesting, but my gut reaction is much more complicated than a fixed mapping (just a more generic linear mapping than the identity of matches), as it would imply various weird behavior when panning or zooming one of the axes.

nicolaskruchten · 2020-08-17T23:10:59Z

Yeah... someone recently brought up dual y-axes with matching 0=0 but otherwise independent scales, on the forum I think.

kricka91 · 2020-08-21T12:31:44Z

It's true that for Celsius/Fahrenheit, a ratio is not enough; you would need an offset as well. Maybe an extra offset parameter would do. Or you could have a single parameter which is a formula that translates a value on one axis to another value on the other "matching" axis, which is applied to the minimum and maximum values. In the latter case, the user would be responsible for making sure that both axes are still linear if that's the desired result.

Also, I currently need to insert an extra data series (without any x or y values) just to map it to the second y axis to make sure it renders. To me it would feel less ugly if I didn't need to do this, but instead just map the axis to another axis. Maybe it's difficult to change, though, and it might not be super important.

One thing I like about the matches property is that the axes match in real time when you drag one of them, and not just when you release the mouse button. I would really like to retain this behavior.

I noticed also that the matches property interferes somehow with autorange. When all y values are close enough to zero, the range is set to [-1, 4], which I believe is some sort of hard coded default range for plotly charts. However, if some values are outside this range, the axis range is set automatically to fit the data. (You can test it with my pasted code above; just change the y values). The problem goes away when I remove the matches property. Is this a known bug?

nicolaskruchten · 2020-08-21T12:52:21Z

re matches I would not be in favour of using this attribute to accomplish this kind of thing... "matches" actually implies "the ranges are the same" which is why the panning/zooming works. If we want the ranges to be linked by a constant offset and scale I would favour adding a new attribute :)

re the autorange behaviour you're describing, could you please open a separate issue with an example of this? I'd like to keep this thread focused on the initial issue if possible. "one issue per issue" keeps things more manageable :)

jackparmer · 2020-09-10T19:46:40Z

This issue has been tagged with NEEDS SPON$OR

A community PR for this feature would certainly be welcome, but our experience is deeper features like this are difficult to complete without the Plotly maintainers leading the effort.

What Sponsorship includes:

Completion of this feature to the Sponsor's satisfaction, in a manner coherent with the rest of the Plotly.js library and API
Tests for this feature
Long-term support (continued support of this feature in the latest version of Plotly.js)
Documentation at plotly.com/javascript
Possibility of integrating this feature with Plotly Graphing Libraries (Python, R, F#, Julia, MATLAB, etc)
Possibility of integrating this feature with Dash
Feature announcement on community.plotly.com with shout out to Sponsor (or can remain anonymous)
Gratification of advancing the world's most downloaded, interactive scientific graphing libraries (>50M downloads across supported languages)

Please include the link to this issue when contacting us to discuss.

thegreencouch · 2022-02-05T08:53:16Z

@kricka91 Overriding the d3 locale formatter in this manner is not possible anymore with the same code with the new updates(d3.locale does not exist on plotly.js anymore). Do you know if there's an alternate way to do the same patch?

gvwilson · 2024-07-05T12:26:06Z

Hi - we are trying to tidy up the stale issues and PRs in Plotly's public repositories so that we can focus on things that are still important to our community. Since this one has been sitting for a while, I'm going to close it; if it is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. Alternatively, if it's a request for tech support, please post in our community forum. Thank you - @gvwilson

jackparmer added the ♥ NEEDS SPON$OR label Sep 10, 2020

AaronStiff mentioned this issue Feb 24, 2023

Adding multiple X axes to the same line plotly/plotly.py#3948

Closed

gvwilson closed this as completed Jul 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple interdependent axes #5076

Multiple interdependent axes #5076

kricka91 commented Aug 14, 2020 •

edited

Loading

nicolaskruchten commented Aug 14, 2020

kricka91 commented Aug 17, 2020

nicolaskruchten commented Aug 17, 2020

alexcjohnson commented Aug 17, 2020

nicolaskruchten commented Aug 17, 2020

alexcjohnson commented Aug 17, 2020

nicolaskruchten commented Aug 17, 2020

kricka91 commented Aug 21, 2020 •

edited

Loading

nicolaskruchten commented Aug 21, 2020

jackparmer commented Sep 10, 2020 •

edited by ndrezn

Loading

thegreencouch commented Feb 5, 2022

gvwilson commented Jul 5, 2024

Multiple interdependent axes #5076

Multiple interdependent axes #5076

Comments

kricka91 commented Aug 14, 2020 • edited Loading

nicolaskruchten commented Aug 14, 2020

kricka91 commented Aug 17, 2020

nicolaskruchten commented Aug 17, 2020

alexcjohnson commented Aug 17, 2020

nicolaskruchten commented Aug 17, 2020

alexcjohnson commented Aug 17, 2020

nicolaskruchten commented Aug 17, 2020

kricka91 commented Aug 21, 2020 • edited Loading

nicolaskruchten commented Aug 21, 2020

jackparmer commented Sep 10, 2020 • edited by ndrezn Loading

thegreencouch commented Feb 5, 2022

gvwilson commented Jul 5, 2024

kricka91 commented Aug 14, 2020 •

edited

Loading

kricka91 commented Aug 21, 2020 •

edited

Loading

jackparmer commented Sep 10, 2020 •

edited by ndrezn

Loading