Layout images disappear in odd cases
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
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 bysizexandsizey, 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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the provided plotly.js reproduction using add_layout_image, focusing on layout images referenced to x/y data axes, extreme sizex/sizey values, and date-axis numeric coordinates. Done means images remain visible with very large dimensions and when date values are supplied as integer numbers, matching the behavior described for string years.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100