Announcing Dash Bio 1.0.0 🎉 : a one-stop-shop for bioinformatics and drug development visualizations.

Sharpness of added layout image to plotly express graph

Hi,

I am trying to add a logo/image to a plotly express chart in a jupyter notebook. However, no matter what sizing for the photo I select, it always comes out blurry. The chart itself is sharp, the exports of the chart are sharp, but the logo I add onto the chart is super blurry… I have tried changes sizes of both the image and the display, helps a bit, but never sharp… please help!

I think ti might have something to do with this thread here, but don’t know how to translate this dash/asset folder type stuff to my context of a jupyter notebook:

My code is below:

included = relevant_df

fig = px.line(included,
            x='date', y='contri_1yr_qual', color='url_short', 
            hover_data=["id", "createdAt", 'first_inst'],
            category_orders={"url_short": list(included.url_short[:20])})

        
fig.update_layout(title={
        'text': "Active Qualified Contributors Over Time - SRE stack",
        'y':0.95,
        'x':0.5,
        'xanchor': 'center',
        'yanchor': 'top'}, width=1000, height=600)

# ------- THIS IS THE PROBLEM BELOW
fig.add_layout_image(
    dict(
        source='rajko_sig2.svg',
        xref="paper", yref="paper",
        x=0.02, y=0.8,
        sizex=0.4, sizey=0.5,
        sizing = 'contain',
        xanchor="left", yanchor="bottom"
    )
)


fig.show()

@nolefp
It could be influenced by the quality of your image. This is an example following your code, and a nice image rendering:

import plotly.graph_objects as go
fig=go.Figure()
fig.update_layout(title={
       'text': "Active Qualified Contributors Over Time - SRE stack",
        'y':0.95,
        'x':0.5,
        'xanchor': 'center',
        'yanchor': 'top'}, width=1000, height=600)
fig.add_layout_image(
    dict(
        source='https://raw.githubusercontent.com/empet/Datasets/master/Images/plotly-official.svg',
        xref="paper", yref="paper",
        x=0, y=1,
        sizex=0.1, sizey=0.2,
        sizing = 'contain',
        xanchor="left", yanchor="bottom"
    )
)

Hmmm perhaps… This is the image I am trying to add to the graphic. Does it look sharp on your machine?? Thank you so much!!!

png:

svg:
https://storage.googleapis.com/rajko-medium/rajko_sig.svg

Thank you!!
Rajko

@nolefp
The image is too shrinked to be displayed clearly.
My suggestion is to place the image above the plot area:

import plotly.graph_objects as go
fig=go.Figure()
fig.update_layout(title={
       'text': "Active Qualified Contributors Over Time - SRE stack",
        'y':0.95,
        'x':0.5,
        'xanchor': 'center',
        'yanchor': 'top'}, width=1000, height=600, margin_t=150,)
fig.add_layout_image(
    dict(
        source='rajko_sig.svg',
        xref="paper", yref="paper",
        x=0, y=1,
        sizex=0.25, sizey=0.8,
        sizing = 'contain',
        xanchor="left", yanchor="bottom"
    )
)

Ok, thank you, really appreciate the help on this!!