Blurry Plots on Mac Preview

đź“Š Plotly Python
1

Hi everyone ,

I have the problem, that pdf plots are displayed blurry when I open them on Mac in Preview (other pdf viewers are fine). This problem was already discussed (and solved) for MatPlotLib: [Bug]: imshow interpolation='none' ignored when using savefig() to PDF format · Issue #25575 · matplotlib/matplotlib · GitHub

The solution there was to set interpolation='nearest' (as in ax1.imshow(data, interpolation='nearest')). Is there a similar way to set the interpolation in Plotly?

Thanks for any help in advance!

2

Hi,

I’m facing the same issue. Did you manage to find a solution?

Thank you!

3

hi @ducky ,
Do you have a minimal reproducible example of a Plotly imshow graph you were trying to build?

4

Hi,

Yes, I see this problem for any px.imshow or go.Heatmap. Here is the sample:

`import plotly.express as px

if name == “main”:
data = [[1, 20, 30],
[20, 1, 60],
[30, 60, 1]]
fig = px.imshow(data)
fig.write_image(“heatmap.pdf”)`

Here is the result:

image
image1436Ă—892 91.8 KB

The problem only appears in Preview. Acrobat and Chrome show the plot as expected.
Plotly version 6.6.0, plotly-express 0.4.1.

5

That’s the same result I got, @ducky . Thanks for sharing.

A quick workaround might be to save the image as a .svg file.

import plotly.express as px

data = [[1, 20, 30],
[20, 1, 60],
[30, 60, 1]]
fig = px.imshow(data)
fig.write_image("heatmap-svg-type.svg")

But I realize it’s only a workaround.

@liamc any idea for how this can be done in pdf?
I don’t think there is a direct interpolation='nearest' equivalent in Plotly Express. It looks more like a preview rendering behavior, rather than a bug.

6

Saving as svg is not a workaround: as soon as I convert that svg to pdf I get the same problem.

7

Comparing with matplotlib, I see that they encode the full size image of the heatmap into an svg, while plotly has 2x2 image. Maybe this is the reason? The code to compare:

import matplotlib.pyplot as plt
import plotly.express as px

if __name__ == "__main__":
    data = [[1, 2],
            [2, 1]]
    plt.imshow(data)
    plt.axis('off')
    plt.savefig("heatmap.plt.svg")

    fig = px.imshow(data)
    fig.update_layout(xaxis_visible=False, yaxis_visible=False)
    fig.update_traces(dict(showscale=False, coloraxis=None), selector={'type': 'heatmap'})
    fig.write_image("heatmap.px.svg")