Detalhes no hovertext | Data Visualization: gráficos de composição e relacionamento

Fui realizar um "desafio" e acabei criando este código:

# Criando um df com os dados desejados
pib_est_10anos = df_pib.copy()
pib_est_10anos = pib_est_10anos.query("ano >= 2010")[["regiao", "sigla_uf", "pib"]]

# Ajustando os valores do PIB para bilhões e ordenando pelo pib
pib_est_10anos["pib_bi"] = (pib_est_10anos["pib"] / 1e9).round(1).astype("int64")
pib_est_10anos["pib_%"] = ((pib_est_10anos["pib"].div(pib_est_10anos["pib"].sum(), axis=0))*100).round(2)
pib_est_10anos = pib_est_10anos.groupby(['regiao', 'sigla_uf']).sum().reset_index()

pib_est_10anos.sort_values('pib_bi',ascending=False)

E utilizei uma parte do código da aula para gerar o gráfico:

# Plotando a treemap com Plotly Express
import plotly.express as px

fig = px.treemap(pib_est_10anos, path=['sigla_uf'], values='pib_bi', title="Treemap do PIB dos Estados Brasileiros nos últimos 10 anos",
                 color = 'regiao', custom_data=['regiao','pib_%'], color_discrete_map={'(?)': BRANCO,'Sudeste':AZUL3, 'Sul':LARANJA1, 
                                                                                     'Nordeste':AZUL5,'Centro-Oeste':VERDE1, 'Norte':CINZA5})


# Ajustando o layout do gráfico
fig.update_layout(width=1000, height=400, margin = dict(t=50, l=0, r=0, b=25), font_family = 'DejaVu Sans',
                  font_size=14, font_color= CINZA2, title_font_color= CINZA1, title_font_size=24)

# Ajustando o hovertext
fig.update_traces(marker=dict(cornerradius=3), texttemplate='<b>%{label}</b>', hovertemplate='<b>Estado:</b> %{label}'
                                                                                             '<br><b>Região</b> = %{customdata[0]} <br>'
                                                                                             '<b>PIB</b> = R$ %{value} bilhões (%{customdata[1]}%)')
fig.show()

A figura gerada me satisfez, porém queria acertar alguns detalhes no hovertext, como:

No 'pib_bi' de SP em bilhões, o valor fica 20,894 bi, enquanto nos demais fica 7094 bi, etc... >> como remover a vírgula, ou adicionar aos demais.
No MT e MS, os valores em % não ficaram arredondados como os demais.

Anexo 1: PIB com vírgula

PIB com vírgula

Anexo 2:

Porcentagem com muitos dígitos Porcentagem com digitos definidos

Oi, Vinicius! Tudo bem por aí?

Para resolver a questão do formato do valor do PIB que aparece no hovertext, podemos utilizar a função de formatação de strings diretamente no parâmetro hovertemplate. Para garantir que todos os valores do PIB sejam exibidos sem vírgulas, usaremos :.0f, que irá formatar o número para não ter casas decimais. Abaixo há um exemplo de como você pode realizar essa tarefa:

hovertemplate='<b>Estado:</b> %{label} <br><b>Região</b> = %{customdata[0]} <br>' +
              '<b>PIB</b> = R$ %{value:.0f} bilhões (%{customdata[1]}%)'

Quanto ao arredondamento dos valores percentuais, podemos utilizar a mesma lógica da formatação de strings para limitar o número de casas decimais. Nesse caso, usaremos a formatação :.2f, que definirá a apresentação de apenas duas casas após a vírgula:

hovertemplate='<b>Estado:</b> %{label} <br><b>Região</b> = %{customdata[0]} <br>' +
              '<b>PIB</b> = R$ %{value:.0f} bilhões (%{customdata[1]:.2f}%)'

Depois de finalizar essas formatações, chegaremos em um resultado mais agradável, Vini!

Fico muito feliz em vê-lo explorando mais desses recursos. Essa é uma etapa muito importante para a consolidação de aprendizagens! Continue sempre assim :)

Espero ter ajudado! Se surgirem novas dúvidas, estarei por aqui.

Um abraço.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!