[BUG] Graphs excluded from print pages if they have over 1000 datapoints #3889

Context
When saving a Dash app as a pdf dcc.Graph behaves wonky if the graph contains more than 1000 datapoints (starting at 1001 points). The actual graph doesn't appear properly in the printed page. Instead, an empty graph is shown (or it could be that the background is printed over the graph).

I tested the behavior in Firefox, Chrome and Edge, and the behavior is different per browser. I tested both printing the page via the browser print page functionality and via the html2pdf library.

In Chrome and Edge, the browser print page functionality works fine with more than 1000 datapoints. In Firefox, the datapoints are gone, and the print preview shows an empty plot.

Using the html2pdf library, all browser have issues. In Chrome and Edge, the plot line seems to have a different scale and is hidden behind the plot background. In Firefox the plot line is completely gone, just showing an empty plot. It could be that it is hidden behind the plot background as well but that the scale is smaller so we don't see it.

It's possibly a bit of an edge case that might not be due to Dash. If it is not, please consider documenting this limitation somewhere.

Expected behavior
The plot should be visible on the printed page regardless how many points are in the plot.

Example app
To reproduce the behavior, take this example app for generating a simple plot and play around with num_points.

import dash
from dash import dcc, html, clientside_callback, Input
import plotly.express as px
import numpy as np

app = dash.Dash(__name__)

num_points = 2000
x = np.linspace(0, 10, num_points)
y = np.sin(x) * 100 + np.random.normal(0, 5, num_points)

fig = px.line(
    x=x,
    y=y,
    title="Line Chart",
)

app.layout = html.Div(
    id="main_container",
    children=[
        html.H1("Plotly Dash App"),
        dcc.Graph(figure=fig),
        html.Div(
            children=[
                dcc.Button(
                    id="save_as_pdf",
                    children="Save as PDF",
                )
            ],
        ),
    ]
)

clientside_callback(
    f"""
    function (button_clicked) {{
        if (button_clicked && button_clicked > 0) {{
            var mainContainerElement = document.getElementById("main_container");

            var opt = {{
                // margin units are those that are defined in jsPDF key below.
                margin: 10,
                filename: 'test_file.pdf',
                image: {{ type: 'jpeg', quality: 0.98 }},
                html2canvas: {{
                    scale: 3,
                    width: 1920,
                    dpi: 300,
                }},
                jsPDF: {{ unit: 'mm', format: 'A4', orientation: 'p' }},
                // pagebreak: {{ mode: ['avoid-all'] }}
            }};
            html2pdf().from(mainContainerElement).set(opt).save();
        }}
    }}
    """,
    Input(component_id="save_as_pdf", component_property="n_clicks"),
)

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

Setup

dash 4.0.0
dash-core-components 2.0.0
dash-html-components 2.0.0
dash-table 5.0.0
plotly 6.5.2
numpy 2.4.4

Take html2pdf from here: https://github.com/eKoopmans/html2pdf.js/blob/main/dist/html2pdf.bundle.min.js and put it in the assets folder next to the example app.

• Browser, Version and OS

  • OS: Windows
  • Browser:
    • Chrome: 150.0.7871.114
    • Firefox: 152.0.4
    • Edge: 150.0.4078.48

Screenshots
Edge/Chrome with 2000 points

Print page (this is also how it shows in all cases when number of points <= 1000)

html2pdf

Firefox with 2000 points

Print page

html2pdf