Search code examples
pythonplotlyvisualizationplotly-python

Using multiple different fonts in one hovertemplate with Plotly/Python


I am using Plotly/Python to create a stacked bar chart of the number of line for each character in the Romeo & Juliet play. I am having some problems with the hovertexts.

I have multiple questions:

  1. I would like to put the first line of the hovertext with a different font than the rest of it. Is it possible to put multiple font in a same hovertext?
  2. Everytime my hovertext appears, the name of the trace still appears on the side. Is it possible to remove it? Thank you in advance!

Solution

  • Yes you can edit both of those things by tweaking your hovertemplate.

    For example, to have your x values display with a specific alternative font, you could do:

    htmp = '<span style="font-family: Overpass, monospace"> x = %{x}</span><br>y = %{y}'
    

    Then, when creating your plot specify 'hovertemplate': htmp or hovertemplate=htmp (depending on how you're doing it).

    Secondly, re the trace name appearing, if you don't care about this showing at all (even for the legend) you can just set name to be '' in your trace. However, if you do wish the legend to appear as normal, you can again edit your hovertemplate to set the <extra> part to be empty, which will prevent the name appearing on the side.

    To extend the earlier example:

    htmp = '<span style="font-family: Overpass, monospace"> x = %{x}</span><br>y = %{y}<extra></extra>'