# Hover compare data, date is covered by legend names

**URL:** <https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143>\
**Category:** 📊 Plotly Python\
**Created:** [December 3, 2019, 11:12pm UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143 "2019-12-03T23:12:34Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![RobH](https://avatars.discourse-cdn.com/v4/letter/r/94ad74/32.png) [@RobH](https://community.plotly.com/u/RobH)\
**Post date:** [December 3, 2019, 11:12pm UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/1 "2019-12-03T23:12:34Z")

</div>

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](https://us1.discourse-cdn.com/flex024/uploads/plot/original/2X/6/66aee70ebb16cb4b6b113ea99fc76b6b6c46be5e.png)

---

<div class="post-metadata">

**Author:** ![Emmanuelle](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emmanuelle/32/7853_2.png) [@Emmanuelle](https://community.plotly.com/u/Emmanuelle)\
**Post date:** [December 4, 2019, 3:01am UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/2 "2019-12-04T03:01:08Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![RobH](https://avatars.discourse-cdn.com/v4/letter/r/94ad74/32.png) [@RobH](https://community.plotly.com/u/RobH)\
**Post date:** [December 4, 2019, 6:25am UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/3 "2019-12-04T06:25:12Z")

</div>

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](http://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’)

---

<div class="post-metadata">

**Author:** ![RobH](https://avatars.discourse-cdn.com/v4/letter/r/94ad74/32.png) [@RobH](https://community.plotly.com/u/RobH)\
**Post date:** [June 2, 2021, 10:06pm UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/4 "2021-06-02T22:06:13Z")

</div>

Were you able to make any progress with this?

---

<div class="post-metadata">

**Author:** ![nicolaskruchten](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/nicolaskruchten/32/7018_2.png) [@nicolaskruchten](https://community.plotly.com/u/nicolaskruchten)\
**Post date:** [June 3, 2021, 12:11am UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/5 "2021-06-03T00:11:53Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobH](https://avatars.discourse-cdn.com/v4/letter/r/94ad74/32.png) [@RobH](https://community.plotly.com/u/RobH)\
**Post date:** [June 3, 2021, 9:51pm UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/6 "2021-06-03T21:51:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![RobH](https://avatars.discourse-cdn.com/v4/letter/r/94ad74/32.png) [@RobH](https://community.plotly.com/u/RobH)\
**Post date:** [May 6, 2022, 1:42am UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/7 "2022-05-06T01:42:46Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/5/e53f75767becd70c4eab8de725ef1634f271be8b.png)

---

<div class="post-metadata">

**Author:** ![RobH](https://avatars.discourse-cdn.com/v4/letter/r/94ad74/32.png) [@RobH](https://community.plotly.com/u/RobH)\
**Post date:** [May 6, 2022, 1:44am UTC](https://community.plotly.com/t/hover-compare-data-date-is-covered-by-legend-names/32143/8 "2022-05-06T01:44:51Z")

</div>

```auto
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')

```