Hover compare data, date is covered by legend names

RobH · December 3, 2019, 11:12pm

I create charts with many traces, at time the legend names cover half of the x axis time/date format.
Can the date/time be changed to move left, instead of being centered then both will be seen.
This is useful in charts with many subplots as the date/time axis is only on the bottom subplot, and the hover value for x becomes important.

Sample_hoverCompare

Emmanuelle · December 4, 2019, 3:01am

Hum, what happens is not very clear… could you please share a reproducible example (with dummy data) so that we can reproduce the issue? In the picture I don’t understand what is hover, legend or axis label.

RobH · December 4, 2019, 6:25am

Thanks Emmanuelle,

Hope this is works for you.

import plotly as py
import cufflinks as cf
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import plotly.io as pio
import plotly.tools as tls
pio.renderers.default = “iframe_connected”
import pandas as pd
from plotly.offline import download_plotlyjs, plot,iplot
import sys
if sys.version_info[0] < 3:
from StringIO import StringIO
else:
from io import StringIO
csvdata=StringIO(""“date,r512B,r1KB,r2KB,r4KB,r8KB,r16KB,r32KB,r64KB,r128KB,r256KB,r512KB,r1MB,r2MB,r4MB,r8MB,r16MB,w512B,w1KB,w2KB,w4KB,w8KB,w16KB,w32KB,w64KB,w128KB,w256KB,w512KB,w1MB,w2MB,w4MB,w8MB,w16MB
2019-11-26 20:55:00,0.0,0.0,0.0,553960.0,938312.0,1139120.0,59096640.0,150848.0,296704.0,98560.0,512.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,7624.0,351496.0,185456.0,254912.0,2176.0,3840.0,512.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:00:00,0.0,0.0,0.0,123000.0,1805192.0,348576.0,26883904.0,80192.0,320384.0,552960.0,512.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,12684.0,465600.0,212512.0,367168.0,4288.0,5504.0,256.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:05:00,2.5,0.0,16.0,14348.0,2539056.0,212336.0,17798976.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,9284.0,419536.0,183328.0,300416.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:10:00,0.5,0.0,2.0,76656.0,991272.0,499232.0,17213184.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8220.0,363016.0,192320.0,291552.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:15:00,0.5,0.0,2.0,44728.0,1136472.0,182496.0,13570208.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8016.0,352280.0,177888.0,251296.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:20:00,8.0,0.0,64.0,77500.0,3022232.0,577584.0,21223072.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8340.0,429840.0,197696.0,334720.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:25:00,0.0,0.0,0.0,43696.0,4226728.0,430128.0,16785760.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,7100.0,390408.0,186880.0,268416.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:30:00,16.0,0.0,34.0,371004.0,1924760.0,823248.0,33315648.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8652.0,430224.0,197488.0,284736.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:35:00,27.5,0.0,152.0,29676.0,1815968.0,343200.0,12250784.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,17976.0,321704.0,175984.0,328000.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:40:00,0.0,0.0,0.0,91332.0,358792.0,236608.0,11794080.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,5428.0,304352.0,165248.0,212416.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:45:00,0.0,0.0,0.0,47164.0,1455496.0,177056.0,16158144.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6896.0,345288.0,170464.0,240064.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
2019-11-26 21:50:00,84.0,0.0,664.0,96872.0,2116800.0,621792.0,15181216.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,5128.0,302704.0,157152.0,192896.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
“””)
df = pd.read_csv (csvdata)
df = df.set_index(‘date’)
fig1 = cf.subplots([df.loc[:,(‘r512B’,‘r1KB’,‘r2KB’,‘r4KB’,‘r8KB’,‘r16KB’,‘r32KB’,‘r64KB’,‘r128KB’,‘r256KB’,‘r512KB’,‘r1MB’,‘r2MB’,‘r4MB’,‘r8MB’,‘r16MB’)].figure(kind=‘scatter’,),
df.loc[:,(‘w512B’,‘w1KB’,‘w2KB’,‘w4KB’,‘w8KB’,‘w16KB’,‘w32KB’,‘w64KB’,‘w128KB’,‘w256KB’,‘w512KB’,‘w1MB’,‘w2MB’,‘w4MB’,‘w8MB’,‘w16MB’)].figure(kind=‘scatter’,)],
shape=(2,1),shared_xaxes=True,subplot_titles=(“Stacked Hist Vlun READ”, “Stacked Hist Vlun WRITE”))
for trace in fig1[‘data’]:
if ‘r’ in trace[‘name’]:
trace[‘stackgroup’] = ‘one’
trace[‘legendgroup’] = trace[‘name’]
else:
trace[‘stackgroup’] = ‘two’
trace[‘legendgroup’] = trace[‘name’]
fig1[‘layout’][‘hoverlabel’] = dict(namelength = -1)
fig1[‘layout’][‘hovermode’]=‘x’
fig1[‘layout’][‘legend.traceorder’]=‘reversed+grouped’
fig1[‘layout’][‘yaxis’].update({‘title_text’:‘KiBs’})
fig1[‘layout’][‘yaxis2’].update({‘title_text’:‘KiBs’})
fig1[‘layout’][‘title’]='Hist Vlun for Vlun ’
pio.write_html(fig1, file=‘hist_vlun.html’,default_height=‘1200px’, auto_open=True, include_plotlyjs=‘cdn’)

RobH · June 2, 2021, 10:06pm

Were you able to make any progress with this?

nicolaskruchten · June 3, 2021, 12:11am

You could try layout.hovermode='x unified' perhaps?

RobH · June 3, 2021, 9:51pm

Thanks Nicolas,
This is definitely an option
We lose the relativity, but the date is clearly visible.

I noticed my sample code above did not paste very well, some indents got lost and quotes went to smart quotes.

I can paste again if needed

Thanks again

Rob

RobH · May 6, 2022, 1:42am

Trying to explain this better and see if there is a chance to correct it.

RobH · May 6, 2022, 1:44am

import plotly as py
import cufflinks as cf
from plotly.subplots import make_subplots
import plotly.graph_objects as go
import plotly.io as pio
import plotly.tools as tls
pio.renderers.default = "iframe_connected"
import pandas as pd
from plotly.offline import download_plotlyjs, plot,iplot
import sys
if sys.version_info[0] < 3:
    from StringIO import StringIO
else:
    from io import StringIO
csvdata=StringIO("""date,r512B,r1KB,r2KB,r4KB,r8KB,r16KB,r32KB,r64KB,r128KB,r256KB,r512KB,r1MB,r2MB,r4MB,r8MB,r16MB,w512B,w1KB,w2KB,w4KB,w8KB,w16KB,w32KB,w64KB,w128KB,w256KB,w512KB,w1MB,w2MB,w4MB,w8MB,w16MB
        2019-11-26 20:55:00,0.0,0.0,0.0,553960.0,938312.0,1139120.0,59096640.0,150848.0,296704.0,98560.0,512.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,7624.0,351496.0,185456.0,254912.0,2176.0,3840.0,512.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:00:00,0.0,0.0,0.0,123000.0,1805192.0,348576.0,26883904.0,80192.0,320384.0,552960.0,512.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,12684.0,465600.0,212512.0,367168.0,4288.0,5504.0,256.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:05:00,2.5,0.0,16.0,14348.0,2539056.0,212336.0,17798976.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,9284.0,419536.0,183328.0,300416.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:10:00,0.5,0.0,2.0,76656.0,991272.0,499232.0,17213184.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8220.0,363016.0,192320.0,291552.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:15:00,0.5,0.0,2.0,44728.0,1136472.0,182496.0,13570208.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8016.0,352280.0,177888.0,251296.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:20:00,8.0,0.0,64.0,77500.0,3022232.0,577584.0,21223072.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8340.0,429840.0,197696.0,334720.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:25:00,0.0,0.0,0.0,43696.0,4226728.0,430128.0,16785760.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,7100.0,390408.0,186880.0,268416.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:30:00,16.0,0.0,34.0,371004.0,1924760.0,823248.0,33315648.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,8652.0,430224.0,197488.0,284736.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:35:00,27.5,0.0,152.0,29676.0,1815968.0,343200.0,12250784.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,17976.0,321704.0,175984.0,328000.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:40:00,0.0,0.0,0.0,91332.0,358792.0,236608.0,11794080.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,5428.0,304352.0,165248.0,212416.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:45:00,0.0,0.0,0.0,47164.0,1455496.0,177056.0,16158144.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,6896.0,345288.0,170464.0,240064.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        2019-11-26 21:50:00,84.0,0.0,664.0,96872.0,2116800.0,621792.0,15181216.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,5128.0,302704.0,157152.0,192896.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0
        """)
df = pd.read_csv (csvdata)
df = df.set_index('date')
fig1 = cf.subplots([df.loc[:,('r512B','r1KB','r2KB','r4KB','r8KB','r16KB','r32KB','r64KB','r128KB','r256KB','r512KB','r1MB','r2MB','r4MB','r8MB','r16MB')].figure(kind='scatter',),
df.loc[:,('w512B','w1KB','w2KB','w4KB','w8KB','w16KB','w32KB','w64KB','w128KB','w256KB','w512KB','w1MB','w2MB','w4MB','w8MB','w16MB')].figure(kind='scatter',)],
shape=(2,1),shared_xaxes=True,subplot_titles=("Stacked Hist Vlun READ", "Stacked Hist Vlun WRITE"))
for trace in fig1['data']:
    if 'r' in trace['name']:
        trace['stackgroup'] = 'one'
        trace['legendgroup'] = trace['name']
    else:
        trace['stackgroup'] = 'two'
        trace['legendgroup'] = trace['name']
fig1['layout']['hoverlabel'] = dict(namelength = -1)
fig1['layout']['hovermode']='x'
fig1['layout']['modebar']=({'add': ["v1hovermode", "togglespikelines"]})
fig1['layout']['legend.traceorder']='reversed+grouped'
fig1['layout']['yaxis'].update({'title_text':'KiBs'})
fig1['layout']['yaxis2'].update({'title_text':'KiBs'})
fig1['layout']['title']='Hist Vlun for Vlun '
pio.write_html(fig1, file='hist_vlun.html',default_height='1200px', auto_open=True, include_plotlyjs='cdn')

Topic		Replies	Views
Mouse hover label on subplots position plotly.js	2	1852	April 7, 2016
Customizing text on x unified hovering 📊 Plotly Python	27	15549	May 27, 2025
Hovertemplate cover x axis 📊 Plotly Python	0	323	May 25, 2023
Hover info on date for timeseries shows only month and year when there's thousands of datapoints plotly.js	1	1361	September 7, 2018
Hover data: Show left most or right most data (not nearest) 📊 Plotly Python	1	462	December 13, 2022

Hover compare data, date is covered by legend names

Related topics