Plotly: How to use both dollar signs and linebreaks in annotations?

user_9815902 0
Viewed 319

Not sure if I'm missing something obvious here but when I'm inserting a break (<br>) into my text with annotations it just seems to ignore it. I've tried fig.add_annotations but the same thing happens.

Do you know why this isn't working?

import pandas as pd
import plotly.graph_objects as go
import numpy as np

df = pd.DataFrame({"Growth_Type": ["Growing Fast", "Growing", "Stable", "Dropping", "Dropping Fast"],
                  "Accounts": [407,1275,3785,1467,623],
                  "Gain_Share": [1.20,8.1,34.4,6.5,0.4],
                  "Keep_Share": [16.5, 101.2, 306.3, 107.2, 27.7]})

df2 = pd.concat([pd.DataFrame({"Growth_Type":df["Growth_Type"], 
              "Opportunity_Type": np.repeat("Gain Share", 5),
             "Wallet_Share": df["Gain_Share"]}),
          pd.DataFrame({"Growth_Type":df["Growth_Type"], 
              "Opportunity_Type": np.repeat("Keep Share", 5),
             "Wallet_Share": df["Keep_Share"]})])

fig = go.Figure()

fig.add_trace(go.Bar(x = df2["Wallet_Share"], 
                     y = df2["Growth_Type"],
                     orientation = "h"
                    ))

fig.update_layout(font = dict(size = 12, color = "#A6ACAF"),
                 xaxis_tickprefix = "$",
                  plot_bgcolor = "white",
                  barmode = "stack",
                  margin = dict(l = 150, 
                               r = 250,
                               b = 100,
                               t = 100),
                  annotations = [dict(text = 'Dropping presents a gain share<br>opportunity of $6.5 mill and a<br>keep share opportunity of $34.4 mill',
                  xref = "x",
                  yref = "y",
                  x = 360,
                  y = "Dropping",
                  showarrow = False,
                  yanchor = "bottom")]
                 )

fig.show()

enter image description here

plotly python
1 Answers

It's not the linebreaks that are causing the trouble here; it is the dollar sign. But you can use the printable ASCII character '&#36;'to get what you want instead:

text = 'Dropping presents a gain share<br>opportunity of '+ '&#36;'+ '6.5 mill and a<br>keep share opportunity of ' + '&#36;'+ '34.4 mill'

Plot:

enter image description here

Complete code:

import pandas as pd
import plotly.graph_objects as go
import numpy as np

df = pd.DataFrame({"Growth_Type": ["Growing Fast", "Growing", "Stable", "Dropping", "Dropping Fast"],
                  "Accounts": [407,1275,3785,1467,623],
                  "Gain_Share": [1.20,8.1,34.4,6.5,0.4],
                  "Keep_Share": [16.5, 101.2, 306.3, 107.2, 27.7]})

df2 = pd.concat([pd.DataFrame({"Growth_Type":df["Growth_Type"], 
              "Opportunity_Type": np.repeat("Gain Share", 5),
             "Wallet_Share": df["Gain_Share"]}),
          pd.DataFrame({"Growth_Type":df["Growth_Type"], 
              "Opportunity_Type": np.repeat("Keep Share", 5),
             "Wallet_Share": df["Keep_Share"]})])

fig = go.Figure()

fig.add_trace(go.Bar(x = df2["Wallet_Share"], 
                     y = df2["Growth_Type"],
                     orientation = "h"
                    ))

fig.update_layout(font = dict(size = 12, color = "#A6ACAF"),
                 xaxis_tickprefix = "$",
                  plot_bgcolor = "white",
                  barmode = "stack",
                  margin = dict(l = 150, 
                               r = 250,
                               b = 100,
                               t = 100),
                  annotations = [dict(text = 'Dropping presents a gain share<br>opportunity of '+ '&#36;'+ '6.5 mill and a<br>keep share opportunity of ' + '&#36;'+ '34.4 mill',
                  #annotations = [dict(text = '&#36;',
                  xref = "x",
                  yref = "y",
                  x = 360,
                  y = "Dropping",
                  showarrow = False,
                  yanchor = "bottom")]
                 )

fig.show()
user_34377870
Related