Move series between y-axis

[apalchys]

When we have multiple y-axis, the users sometimes want to move between y-axis -> to have an ability to move a plot from one y-axis to another.

We think about an idea to add possibility to enable a button next to each label in the legend that allows to toggle between axes.

Here is a demo of my implementation:
https://codepen.io/plotly-demo/pen/ZXqVyR
Technically it is a config field where you can enable buttons and customize button labels (arrows by default).

What do you think about such functionality in PlotlyJS?

[etpinard]

I'd vote for no. I believe that functionality should be left in user-land. I could be convinced otherwise though.

[alexcjohnson]

@apalchys this is really interesting functionality. I think @etpinard is right that the implementation you have here is a bit too specific for us to want to include it in the library - there are so many other cool things people may want to do, such as adding a dropdown to change the data or styles, moving between more than two axes, autoscale to one trace, add curve fits... the sky's the limit!

We should figure out how to add the part that needs to be in the library - telling plotly.js to reserve space in the legend for these buttons and providing a hook to external code that will actually draw them - while leaving the actual button drawing and functionality on the outside. You're right BTW to make this a config option, since it would not be portable if the figure is exported or copied to another environment. I'm not quite sure what the API would need to look like, but I'd suggest we take a stab at that before doing too much coding on it 😅

[etpinard]

Here's some thoughts on what we could add to plotly.js to make the @apalchys desired behavior easier to implement.

Adding custom legend handlers was discussed before (e.g in #65) and adding custom shapes (or icon) to legend items has been discussed in #98. Perhaps this could help achieve @apalchys' desired behavior, for example:

var trace = {
  // .. 
  legenditem: {
    icon: '<svg></svg>'
  }
}

gd.on('plotly_legendclick', function(eventData) {
  // with an eventData object similar to other plotly_ events
})

Moreover, issue #483 proposed a legend-item-drag behavior which could be overrode using:

// or even
gd.on('plotly_legenddrag', function(eventData) {})

Alternatively, maybe those icons could become layout.images outside the legend with handlers for a new plotly_clickimage event (similar to the current plotly_clickannotation').

[etpinard]

Quick update:

We're thinking of the going the way of

var trace = {
   legenditem: {
     icon: '<svg></svg>' // or '<select><option value=""></option>></select>'
   }
}

as part of the JSON-serializable figure object. These icons will be inserted in the legend item using window.DOMParser or something equivalent. We'll either have to sanitise the icon string to protect apps from XSS attacks or be clear about the security implications.

Custom interactions with the legend item (or icon) will be supported using a new plotly_ event e.g.

gd.on('plotly_legendclick', function(eventData) {
  // with an eventData object similar to other plotly_ events
  // that includes info of the legend item itself
})

By setting events handling via gd.on, we'll be able to guarantee that users won't have to rebind their events whenever the icons get redrawn.

[apalchys]

@etpinard sorry for later response.
Thanks for your ideas, but we decided to do it as a wrapper since it will be not easy to create an universal solution. Closing the issue.