plotly / plotly/plotly.py

enable display of different ticktext for hover and axis when using `hovermode='x unified'`

オープン
#4,278 コメント 2 件 リアクション 3 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

feature P3
主要言語
Python
スター
18.8k
フォーク
2.8k
平均マージ
16時間 26分
マージ済み PR(30日)
21

説明

Hi,

Below you can read a feature request (given that this does not exist already).

The scenario

I am looking for a nice solution for displaying a hover "title" different from the ticks when using hovermode='x unified'.
Let's say that you want to display multiple time series and you have your range defined in 2 different ways. You have the timestamps, and the elapsed time. Now, you don't want to display both on the x axis to keep that clutter free, but you want to display them when hovering over the plot.

The problem

Take this code for example:

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]

ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
tickvals = x  

hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=y1, hovertext=hovertext, name='Series 1'))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2'))

fig.update_layout(xaxis=dict(
    tickmode='array',
    ticktext=ticktext,
    tickvals=tickvals
), 
    hovermode='x unified'
)

fig.show()

This will produce the following plot, and the problem is that I want to place "Hover 2" in place of "Day 2", while keeping "Day 2" on the x axis:

image

One solution

One solution I came up with was introducing a 2nd y axis, and placing the hover information there, hiding the axis and hiding the line. This works fine, however results in a hover display that looks "funny", essentially leaving some padding before the displayed text.

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]

ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
tickvals = x  

hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']

fig = go.Figure()

fig.add_trace(go.Scatter(x=x,
                          y=y1,
                          text=hovertext,
                          yaxis='y2',
                          opacity=0,
                          showlegend=False,
                          hovertemplate = "%{text}<extra></extra>") )
fig.add_trace(go.Scatter(x=x, y=y1, hovertext=hovertext, name='Series 1', hovertemplate = "%{y:.1f}<extra></extra>"))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2', hovertemplate = "%{y:.1f}<extra></extra>"))

fig.update_layout(xaxis=dict(
    tickmode='array',
    ticktext=ticktext,
    tickvals=tickvals
    ), 
    hovermode='x unified',
    yaxis2 = dict(
        overlaying='y',
        showticklabels=False
    ),
)

fig.show()

image

Proposed solution

It would be so amazing if one could just have a hoverticktext arg in the layout, that would allow for another piece of text to be set.

Imaginary example code with expected result:

import plotly.graph_objects as go

x = ['2023-07-01', '2023-07-02', '2023-07-03', '2023-07-04']
y1 = [10, 15, 7, 12]
y2 = [5, 8, 10, 6]

ticktext = ['Day 1', 'Day 2', 'Day 3', 'Day 4']
tickvals = x  

hovertext = ['Hover 1', 'Hover 2', 'Hover 3', 'Hover 4']

fig = go.Figure()

fig.add_trace(go.Scatter(x=x, y=y1, name='Series 1'))
fig.add_trace(go.Scatter(x=x, y=y2, name='Series 2'))

fig.update_layout(xaxis=dict(
    tickmode='array',
    ticktext=ticktext,
    tickvals=tickvals,
    hoverticktext = hovertext # added this imaginary line
), 
    hovermode='x unified'
)

fig.show()

And this would result in the following (edited picture) plot:

image

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

まず、issue の Python 例と、plotly.py における既存の axis ticktext、tickvals、hovertext、unified-hover の動作を確認してください。ソースファイルやテストは指定されていないため、変更を plotly.py に入れるべきか、その基盤となる plotting layer に入れるべきかを判断する前に、関連する axis と hover のエントリポイントを特定してください。完了条件は、軸の tick label を変更せずに hovermode='x unified' で分離された hover-axis text が機能し、提示されたケースをカバーするテストがあることです。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
python
領域
data-visualization
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。