plotly / plotly.py

The interactive graphing library for Python :sparkles: This project now includes Plotly Express!
https://plotly.com/python/
MIT License
16.37k stars 2.56k forks source link

ScatterGL alignment fails above height=8190 #4315

Open Lxstr opened 1 year ago

Lxstr commented 1 year ago

Below this height everything works fine. Above this height the alignment of scatterGL marks to tickmarks( or grid lines) completely fails. There is no issue with svg scatter.

height=8180:

CleanShot 2023-08-08 at 14 55 04@2x

height=8500:

CleanShot 2023-08-08 at 14 55 33@2x

Code:

import plotly.graph_objects as go
from dash import dcc
import numpy as np
import dash

app = dash.Dash(__name__)

app.layout = dcc.Graph(id="figure", figure={})

y_values=list(range(1, 353))
scatter_trace = go.Scatter(
    x=np.zeros(353),
    y=y_values,
    showlegend=False,  # Exclude this trace from the legend
    mode="markers"
)
layout = go.Layout(
    height=8500,
)
fig = go.Figure(data=[scatter_trace], layout=layout)

fig.update_yaxes(
    range=[0, len(y_values)],
    tickvals=y_values,
)

app.layout.figure = fig

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

Versions: name : plotly
version : 5.15.0

name : dash
version : 2.11.1

alexcjohnson commented 1 year ago

This is a fundamental browser-dependent limit to WebGL rendering https://github.com/plotly/plotly.js/issues/4339 - see stats for your browser at https://webglreport.com/?v=2

@archmoj during your upcoming WebGL work maybe it would be worth trying to detect this and log a warning? If we want to go further we could try to render into a smaller buffer and stretch it with CSS... but that would be a major effort and quality would suffer anyway.