Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Layout images disappear in odd cases #6788

Copy link
Copy link
Open
@alexcjohnson

Description

@alexcjohnson
Issue body actions

Two situations where layout images referenced to data can disappear:

  • When one of the size parameters is far, far larger than necessary. Normally (with the default sizing: 'contain') the aspect ratio of the image is preserved, so in the rectangle described by sizex and sizey, one of those is limiting and the non-limiting size can be increased indefinitely with no visible effect. This has a limit though: if you make it something like a million times too big, the image abruptly disappears. (this one is from an example by @celia-plotly)
  • On a date axis, in data arrays integer numbers and integer strings are both treated as years, but in layout images only integer strings are treated as years; integer numbers are treated as milliseconds since 1970 (and with the local UTC offset no less 🤦)

Here's a working example:

import dash
from dash import dcc
import plotly.graph_objects as go
import pandas as pd

# Create a Dash app
app = dash.Dash(__name__)

df = pd.DataFrame.from_records([
    {"Year": 2008, "Tickets Sold": 8000000},
    {"Year": 2009, "Tickets Sold": 9000000},
    {"Year": 2010, "Tickets Sold": 5000000},
    {"Year": 2011, "Tickets Sold": 5000000},
    {"Year": 2012, "Tickets Sold": 7000000},
    {"Year": 2013, "Tickets Sold": 5000000},
    {"Year": 2014, "Tickets Sold": 7000000},
])
fig = go.Figure()
fig.add_trace(go.Scatter(x=df["Year"], y=df["Tickets Sold"]))
for j, row in df.iterrows():
    fig.add_layout_image(
        dict(
            source="https://upload.wikimedia.org/wikipedia/commons/8/8a/Plotly-logo.png",
            xref="x",
            yref="y",
            x=row["Year"],
            y=row["Tickets Sold"],
            sizex=1,
            sizey=1000000,
            xanchor="center",
            yanchor="middle",
        )
    )

# Define the app layout
app.layout = dcc.Graph(figure=fig, style={"height": "50vh"})

if __name__ == "__main__":
    app.run(debug=True)

And if you make sizex bigger, even as high as 10000, nothing changes. But go up to 100000 and the images disappear.

For the date flavor: add fig.update_xaxes(type="date") and sizex=1000*3600*24*365 (one year in msec), the images disappear. You can find them if you zoom out and back in around year 1970. But if you stringify, ie x=str(row["Year"]), they reappear atop the data points again.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3backlogbacklogbugsomething brokensomething brokensev-3annoyance with workaroundannoyance with workaround

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.