Annotations with special characters

I would like to use special characters in my plots. For example:

import plotly.offline as py
import plotly.graph_objs as go

data = [
    go.Scatter(
        x=[1, 2, 3],
        y=[3, 1, 6],
        marker={
            'color': 'rgb(16, 32, 77)'
        }
    )
]

d = 1000/3

Kombi = " "
text1 = ('\u0308'+'\u03C6', '=', "{:.2f}".format(d), 'rad/s'+'\u00B2')


layout = go.Layout(
    annotations=[
        {
            'text': Kombi.join(text1),
            'x': 2,
            'xref': 'x',
            'y': 4,
            'yref': 'y',
            'font': {
                    'size': 40
                    }
        }
    ]
)

print(Kombi.join(text1))

figure = go.Figure(data=data, layout=layout)

py.plot(figure, filename='reference-graph.html')

The print command shows: hc_2538

The graph shows the annotation like : hc_2539

I would like to know, how to get this combining diaeresis centered on top of the greek letter phi, psi …

Thanks for help!
Peter

Hi @LPG,

Could you update your example code to put in into a fenced code block (See https://www.google.com/search?q=github+fenced+code+blocks&ie=utf-8&oe=utf-8&client=firefox-b-1-ab). This way the markdown renderer doesn’t mess up the formatting.

Also, please include an image of the figure that you’re seeing and a screenshot of the result of your print command.

Thanks!
-Jon

Is that question to easy or to difficult?

Thanks,
Peter

Hi @LPG,

This one is a bit difficult. Here’s what I’ve noticed

  1. I only get the combined behavior when displaying the string using print in the ipython terminal. I don’t see the combined behavior when printing in JupyterLab (or plotly annotations as you’ve noticed)

  2. I’ve played around a bit with HTML character encodings in an SVG text editor (https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_text) and nothing I’ve tried in terms of character encodings or fonts has resulted in the combine character that’s displayed in ipython terminal.

Unfortunately I’m honestly not sure what to try from here. If we could find an example of the proper behavior in an SVG image somewhere we could work on tracing that behavior through plotly.js.

-Jon