plotly.js icon indicating copy to clipboard operation
plotly.js copied to clipboard

Colorbar LaTeX Title Rendering

Open remingtonsexton opened this issue 5 years ago • 3 comments

I have posted this issue on plotly.py (here) however, someone on the plotly community forum said I should post it here as well.

I am trying to implement a LaTeX math title for my colorbar and plotly is having some trouble rendering it. I am using Python 2.7, Plotly 4.5.2. My code:

fig = go.Figure()
fig.add_trace(go.Scatter(x=x_data, 
                         y=y_data,
                         mode='markers',text=obj_name,name='',
                         marker=dict(symbol='circle',size=12,line=dict(width=1,color='SlateGray'),
                                     opacity=0.75,color=log_mbh,colorscale='Rainbow',showscale=True,
                                     cmin=6.0,cmax=8.0,
                                     colorbar=dict(title=dict(text=r'$\Large\alpha\beta\gamma\delta$',side='top'),
                                                   thickness=50,tickmode='array',tickvals=[6.0,6.5,7.0,7.5,8.0]), 
                                    ),
                         )
             )
fig.add_trace(go.Scatter(x=np.arange(0,300,10), y=np.arange(0,300,10),
                         line = dict(color='LightSlateGray', width=2, dash='dash')))

fig.update_layout(
    template='plotly_white',
    xaxis = dict(showgrid=False,ticks='inside',zeroline=True,zerolinecolor='black',rangemode='tozero'),
    yaxis = dict(showgrid=False,ticks='inside',zeroline=True,zerolinecolor='black',rangemode='tozero'),
    xaxis_title=dict(text=r'$x$'),
    yaxis_title=dict(text=r'$y$'),
    font=dict(size=16),
    showlegend = False,
    autosize   = False,
    width      = 750,
    height     = 750,
    margin     = dict(l=50,r=50,b=50,t=50,pad=10),
)

fig.show()

Which produces the output:

newplot (1)

As you can see, the LaTeX title seems to be rotated 90 deg, and ignoring side='top'. I have tried to increase the width of the colorbar and increase the plot's margins to no avail. Is there a workaround or solution for this problem?

Update: I have found a workaround but not a solution. This is definitely a bug as far as I cant tell.

One option, if you do not require Greek alphabet, is to simply use HTML code, simply using italics, superscripts or subscripts.

If one wants to use Greek letters, HTML entities don't work, but a few decimal and hexadecimal codes do work.

This issue should be addressed, especially if Plotly is to be used for publishing purposes. Otherwise, Matplotlib is the alternative that does work.

remingtonsexton avatar Feb 27 '20 08:02 remingtonsexton

+1 for this! This bug is a blocking item for use of Plotly in publication materials.

JWKennington avatar Oct 04 '21 01:10 JWKennington

Now that that firefox issue workaround was implemented ( https://github.com/plotly/plotly.js/pull/5993 ), maybe it'll be easier to debug this?

LunarLanding avatar Dec 14 '21 21:12 LunarLanding

Just wanted to bump this as I make my own plot for publication. Here with html. I can render LaTeX in the title or as axes titles, but if I try the colorbar the color axis tick values are reset. The LaTeX does display though incorrectly oriented. image With Latex: image

EntPyle avatar Aug 12 '22 16:08 EntPyle

Any updates?

theo-brown avatar Nov 01 '22 18:11 theo-brown

This might be associated, When trying to add a Latex formatted colorbar title to a Scattermapbox marker, passing mathjax=True impedes the colorbar to be displayed. The same string shows normally with dcc.Markdown

Boorhin avatar Feb 10 '23 06:02 Boorhin