Plotlyでマウスオーバーしたときのポップアップの中のテキストを折り返すの巻
![Plotlyでマウスオーバーしたときのポップアップの中のテキストを折り返すの巻](https://vucavucalife.com/wp/wp-content/uploads/2020/05/statistic-1820320_1280-890x500.png)
はじめに
Plotlyで、このようにマウスオーバーで出てくるポップアップ(hover text)中の長い文字列を、、、
![plotly_hovertext_wrap01](https://vucavucalife.com/wp/wp-content/uploads/2021/11/plotly_hovertext_wrap01.png)
このように折り返したいのです。
![plotly_hovertext_wrap02](https://vucavucalife.com/wp/wp-content/uploads/2021/11/plotly_hovertext_wrap02.png)
と、いう話。
やり方
とりあえず手を加えてない形を表示してみます。”text”の部分に長い文字列を入れています。
import plotly.graph_objects as go fig = go.Figure(data=go.Scatter( x=[2], y=[10], mode='markers', text="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ", marker=dict(size=[80], color=["orange"]) )) fig.show()
すると、こうなります。
![plotly_hovertext_wrap01](https://vucavucalife.com/wp/wp-content/uploads/2021/11/plotly_hovertext_wrap01.png)
普通の長いテキストを折り返したい場合は
HTMLの<br>タグを改行したい部分に入れればいいだけでした。
import plotly.graph_objects as go fig = go.Figure(data=go.Scatter( x=[2], y=[10], mode='markers', text="abcdefghijklmnopqrstuvwxyz<br>0123456789<br>ABCDEFGHIJKLMNOPQRSTUVWXYZ", marker=dict(size=[80], color=["orange"]) )) fig.show()
![plotly_hovertext_wrap02](https://vucavucalife.com/wp/wp-content/uploads/2021/11/plotly_hovertext_wrap02.png)
でけた。
例えばリストの形で変数に入れ込んでいる場合は、、、
import plotly.graph_objects as go fig = go.Figure(data=go.Scatter( x=[2], y=[10], mode='markers', text=[["abcdefghijklmnopqrstuvwxyz", "0123456789", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"]], marker=dict(size=[80], color=["orange"]) )) fig.show()
![plotly_hovertext_wrap03](https://vucavucalife.com/wp/wp-content/uploads/2021/11/plotly_hovertext_wrap03.png)
“<br>”.join(list)とすればよしと。
import plotly.graph_objects as go fig = go.Figure(data=go.Scatter( x=[2], y=[10], mode='markers', text=["<br>".join(["abcdefghijklmnopqrstuvwxyz", "0123456789", "ABCDEFGHIJKLMNOPQRSTUVWXYZ"])], marker=dict(size=[80], color=["orange"]) )) fig.show()
![plotly_hovertext_wrap04](https://vucavucalife.com/wp/wp-content/uploads/2021/11/plotly_hovertext_wrap04.png)
こちらもでけた。
HTMLタグの<br>で改行できる、と。少しあたふたしたのでメモ。
おしまい
実施環境
Python 3.9.4
Plotly ver.4.14.3
参考
https://plotly.com/python/hover-text-and-formatting/
https://business.xserver.ne.jp/
![](https://www13.a8.net/0.gif?a8mat=3BDOYJ+ECSAMY+CO4+6LHDU)
https://www.xdomain.ne.jp/
![](https://www13.a8.net/0.gif?a8mat=3BFNHP+G9UKT6+CO4+15UCEA)
★LOLIPOP★
![](https://www12.a8.net/0.gif?a8mat=3BHQOS+GDF6FU+348+5ZMCI)
.tokyo
![](https://www15.a8.net/0.gif?a8mat=35HCWD+9N3R8A+50+2HT8LU)
MuuMuu Domain!
![](https://www11.a8.net/0.gif?a8mat=3BHQOS+GEM1NE+348+1BNJ9E)