One non-numerical x axis, two y axis

plotly.js
1

Hi,

I was wondering if someone could explain this behaviour to me?

When my xaxis ticks are numbers, Plotly automatically overlays the second trace onto the first (desirable). However, when the xaxis ticks are strings, Plotly does not overlay them.

I’m asking, as I’m looking for ways to optimise how much data I am sending on the wire from my back end; sending the same x axis multiple times is rather wasteful. While I know I could simply append the x axis to each other trace client side, I was wondering if there was anything Plotly could do which would be a more elegant solution?

Thanks!

2

I’m a little confused. Would you mind sharing a reproducible example?

1 Like
3

Hi Etienne,

Thanks for responding! In this pen you can see the behaviour I was trying to explain.

In particular, please note how in the first graph (top graph), Plotly has drawn the two traces beside each other when the second trace/object has its x property omitted. In this graph, the first trace has a non-numerical x axis.

Then take a look at the graph beneath. This time, first trace has a linear, numerical x axis. Being exactly the same graph with only the x axis different, Plotly overlays the second trace onto the first, as desired.

I think using the overlay property in the layout argument could make the bottom graph look like the top graph, without the need to append an x axis to the trace, but I figured I should just ask the experts as it might be quicker an easier than trial and error :slight_smile:

4

Ok I see. Thanks for the codePen. It’s definitely easier to understand someone’s question with code than just words.

In particular, please note how in the first graph (top graph), Plotly has drawn the two traces beside each other when the second trace/object has its x property omitted. In this graph, the first trace has a non-numerical x axis

Hmm, there might be bug in there I was expecting your first graph to look like:

image
image1040×398 12.4 KB

In brief, to get the desired behavior, you can simply set x: ['a', 'b', 'c', 'd'] in the second trace.

Now why does the second graph just work w/o an additional x coordinate array? That’s because by default when x (or y) isn’t defined, plotly fill it in with attributes x0 and dx where x0 (default: 0) is the starting position and dx (default: 1) the constant step. Both x0 and dx are ignored when x is provided as an array. So, in your second graph that x coords of your first trace are equivalent the linear span generated with inferred x0 and dx of the second trace. That’s why the two trace sit on top of one another. In fact:

Plotly.plot("plot2", [
  { y: [0, 1, 2, 3], name: "name1" },
  { y: [3, 2, 1, 0], name: "name2" }
]);

gives the same result.

I guess we could build a linear span using x0, dx and the existing categories (in your case ['a', 'b', 'c', 'd']) if x isn’t provided. But, maybe that’s a little too opinionated? I feel making users enforce categories coordinates by supplying x data for every trace is more robust API-wise.

5

That’s very insightful, thank you etienne! Now I understand how the API works better.

I didn’t know it was a bug, sorry! If you prefer, I could post it as an issue on github to track, but I’m not particularly fussed about it.

The solution I persisted was to just append the x axis to each trace in a worker, once the data was received from the server; more or less what was recommended… I think.