plotly / plotly/plotly.js

Colorbar LaTeX title renders improperly

Open
#4,605 6 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
JavaScript
Stars
18.3k
Forks
2k
Avg merge
2d 12h
Merged PRs (30d)
28

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the colorbar title case from the provided Python example, focusing on colorbar title rendering in plotly.js. Verify how LaTeX text handles title side='top' and rotation; done when the title renders with the requested orientation and placement without the reported workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, latex, python
Domain
data-visualization
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
65/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.