feature request: z-ordering parameter for traces

Hello,

it would be very nice to have the possibilty to set the z-ordering priority of traces in plotly. I think the way matplotlib handles it is pretty handy:

default z-order value for a trace is 0;
if multiple trace have the same z-order value, matplotlib decides the ordering of traces itself (random or whatever);
if a trace have a greater z-order than an other, it appears on top of it;
if a trace have a smaller z-order value than the other, it appears below;

Veeeery useful. Right now I am strugling to have a marker to appear on top of a bunch of line plots and it is very annoying.

By the way, the hack I found to overcome this problem right now is to store the trace I want to add on TOP in a globalvariable (on can think of a list if one have multiple trace to add in a certain ordering) and then, just before rendering the figure, I had the trace to the figure. Then the last added trace appears on top of all other traces.

I am encountering the same issue. I would like to add several lines on top of scatter plot generated by px.scatter() .I tried to reorder the traces by doing fig.data = fig.data[::-1] but it only changes the order shown in legend, I still have not been able to add lines on top of points after trying almost all the tricks online, which is a bit frustrating..

it would be super helpful if plotly can support something like zorder

Another use case for this feature is related to legend ordering. Currently, if you use the order of traces to specify the legend ordering, we cannot specify a z order independently. Since legend order is either None (i.e. insertion order) or alphabetical order, it is impossible to set an arbitrary order of legend items and at the same time set and arbitrary zorder of traces.

Has there been any movement to try to implement this?

A few notes on this:

This would have to be implemented in Plotly.js rather than in Python
Traces are currently drawn in batches by type, so scatter is always drawn on top of bar, etc, and this would be quite complicated to change, so the more straightforward option would be to control the other within types first

I should add that fig.data = fig.data[::-1] does work for me:

import plotly.express as px
import plotly.graph_objects as go

fig = px.scatter(x=[1,2,3,4], y=[1,2,3,4], size=[1,2,3,4], color=["a","a","b","b"])
fig.add_trace(go.Scatter(x=[1,2,3,4], y=[1,2,3,4], mode="lines", line_color="black"))
fig.data = fig.data[::-1]
fig.show()

as does reordering fig.data like this:

import plotly.express as px
import plotly.graph_objects as go

fig = px.scatter(x=[1,2,3,4], y=[1,2,3,4], size=[1,2,3,4], color=["a","a","b","b"])
fig.add_trace(go.Scatter(x=[1,2,3,4], y=[1,2,3,4], mode="lines", line_color="black"))
fig.data = (fig.data[1],fig.data[2],fig.data[0])
fig.show()

Any news on this? This would be a great feature!

+1, would love to be able to draw scatter traces BEHIND candlesticks for example. When trying to use hover label to inspect individual candles, other lines on top prevent label from showing.

I should add that fig.data = fig.data[::-1] does work for me:

import plotly.express as px
import plotly.graph_objects as go

fig = px.scatter(x=[1,2,3,4], y=[1,2,3,4], size=[1,2,3,4], color=["a","a","b","b"])
fig.add_trace(go.Scatter(x=[1,2,3,4], y=[1,2,3,4], mode="lines", line_color="black"))
fig.data = fig.data[::-1]
fig.show()

as does reordering fig.data like this:

import plotly.express as px
import plotly.graph_objects as go

fig = px.scatter(x=[1,2,3,4], y=[1,2,3,4], size=[1,2,3,4], color=["a","a","b","b"])
fig.add_trace(go.Scatter(x=[1,2,3,4], y=[1,2,3,4], mode="lines", line_color="black"))
fig.data = (fig.data[1],fig.data[2],fig.data[0])
fig.show()

Seems this trick doesn't work when there is too much data. Example:

import plotly.express as px
import plotly.graph_objects as go
import numpy as np

df = np.random.randint(0,100,size=(10000, 2))
color_df = np.random.randint(0,4,size=(10000, 1)).T[0]
centers = np.random.randint(0,100,size=(7, 2))

fig = px.scatter(x=df[:, 0], y=df[:, 1], color=color_df)
fig.add_scatter(
    x=centers[:, 0],
    y=centers[:, 1],
    marker=dict(size=20, color="LightSeaGreen"),
    name="Centers",
    mode="markers",
)
fig.data = (fig.data[1], fig.data[0])
fig.show()

I tried removing the optional parameters and use only X,Y but it keeps putting the centers below the data.

Seems this trick doesn't work when there is too much data.

I'm having a similar issue with a Candlestick trace always rendering in the BG, but in my case, I see the the legend re-ordered, but the graph maintains the old z ordering (candles are obscured by the scatter I'm trying to put in the BG).

I should add that fig.data = fig.data[::-1] does work for me:

This does allow you to rearrange the order of the traces, but it rearranges it both in the legend and in the plot itself. The layering of the traces still seems to be inextricably linked to the order of the legend, unless there's something I'm missing. Often, I want less important traces to be at the bottom of the legend AND at the bottom layer on the plot. I don't see a way to do this currently. +1 for z-ordering parameter suggestion :)

(BTW, I love plotly and use it all the time. Thanks for maintaining such an awesome library!)

@set92

@set92, @ptim just a quick FYI as I got a similar problem (with "too much" data) and got it working following your lead. The hint was in #2345 (comment), i.e. the ordering is done per type. In your example in #2345 (comment) the px.scatter is implicitly converted to a Scattergl but the add_scatter only adds a Scatter object. Now when the graph object for add_trace has the same resulting type (Scattergl), this works for me:

import plotly.express as px
import plotly.graph_objects as go
import numpy as np

df = np.random.randint(0, 100, size=(10000, 2))
color_df = np.random.randint(0, 4, size=(10000, 1)).T[0]
centers = np.random.randint(0, 100, size=(7, 2))

fig = px.scatter(x=df[:, 0], y=df[:, 1], color=color_df)
fig.add_trace(
    go.Scattergl(
        x=centers[:, 0],
        y=centers[:, 1],
        marker=dict(size=20, color="LightSeaGreen"),
        name="Centers",
        mode="markers",
    )
)
fig.show()

Please note that the idea of controlling the legend order is tracked in #2345, and is in principle distinct from the drawing order.

Update on legend ordering independently of trace ordering in data: this is now possible with the new legendrank attribute in v5.0 :) https://plotly.com/python/legend/#legend-order

@nicolaskruchten

@nicolaskruchten Thank you!
Works fine even with the subplots.

Is it possible also to specify this for the shapes? I would like to keep sibling shapes in the same z-order.

Is it affecting traces z-order or only legends order in the legends panel?

Life changing feature, would love to see it implemented in the future!

push push

Same here, this would be useful!

imperative feature. It should also be possible to alter the order in the rendered plot, by dragging and dropping the key items into the desired order.

looks like someone is working on it

Want to note, given there is so much excitement about this feature in this thread: Members of the Plotly team are currently working on this feature in plotly.js in plotly/plotly.js#6918, which means it will be inherited by plotly.py once completed. Really excited to see this feature land!

I'm happy to announce that this feature is now available from version 5.21.0 for all SVG based cartesian traces. Please see the example below:

import plotly.graph_objects as go

fig = go.Figure(
    go.Bar(
        x=[0, 1, 2],
        y=[1, 2, 3]
    )

)
fig.add_trace(
    go.Scatter(
        x=[0, 1, 2],
        y=[3, 2, 1],
        zorder=-2
    )
)
fig.show()

Awesome! Thanks so much to all the developers.

Really awesome! This helps a lot.

However, it is still not supported for annotations plotly.graph_objects.Figure.add_annotation. Is this on the roadmap?

It would be really useful to set a watermark or "disclaimer message", for instance.

It's still not supported for scattergl traces in plotly.js

Navigation Menu

Repository navigation

feature request: z-ordering parameter for traces #2345

11 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

feature request: z-ordering parameter for traces #2345

Description

Activity

lucgiffon commented on Apr 2, 2020

huidongchen commented on May 11, 2020

tritemio commented on May 27, 2020

dmalyuta commented on Aug 10, 2020

nicolaskruchten commented on Aug 10, 2020

nicolaskruchten commented on Aug 10, 2020

JoElfner commented on Sep 22, 2020

jaymegordo commented on Jan 3, 2021

set92 commented on Feb 13, 2021

ptim commented on Mar 29, 2021

benlindsay commented on May 27, 2021

fleimgruber commented on Jun 10, 2021

nicolaskruchten commented on Jun 21, 2021

nicolaskruchten commented on Jun 21, 2021

ievgennaida commented on Jun 22, 2021

11 remaining items

aleferna12 commented on Nov 28, 2023

devamin commented on Jan 13, 2024

aymeric-roucher commented on Jan 18, 2024

beevabeeva commented on Feb 27, 2024

ayjayt commented on Mar 11, 2024

ndrezn commented on Mar 27, 2024

Farkites commented on Apr 18, 2024

yotkadata commented on Apr 18, 2024

janjoch commented on Jul 5, 2024

jarrisondev commented on Aug 14, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions