hover_tick_issue.md

Plotly Unified Hover: Tick Label vs Hover Label Conflict

Setup

• Plotly chart with hovermode: "x unified"
• Custom tick labels set via tickmode: "array" + tickvals + ticktext
• hoverformat set to "%a %b %d, %H:%M" on all x-axes (e.g. "Mon Jun 02, 06:00")
• Charts rendered as HTML via plotly.io.to_html inside a Streamlit iframe

Desired behaviour

• Tick labels: date at midnight ("Mon Jun 02"), time-only at all other ticks ("06:00", "12:00")
• Hover x-label: always shows "Mon Jun 02, 06:00" format regardless of position

Observed behaviour

When tickmode: "array" with explicit ticktext is used, Plotly appears to use the ticktext string as the hover x-label when the cursor is exactly at a tick position, overriding hoverformat. At non-tick positions, hoverformat applies correctly.

Result:

• Hovering at 07:00 (non-tick) → "Mon Jun 02, 07:00" ✓
• Hovering at 06:00 (tick, ticktext = "06:00") → "06:00" ✗

This does not affect the 7-day view because all ticks there are full date labels ("Mon Jun 02"), so even when ticktext is used for hover it contains the date.

What was tried

1. Re-asserting hoverformat in every Plotly.relayout call — no effect; Plotly still uses ticktext at tick positions.

2. Including the date in all non-midnight ticktext (e.g. "Mon 06:00") — fixes hover consistency but changes tick label appearance, which was not wanted.

3. plotly_hover DOM override — listening to plotly_hover event and overwriting .hoverlayer .axistext text content — did not work, likely because the selector does not match the actual DOM element Plotly renders for the unified hover x-label.

Question

Is there a supported way in Plotly.js / Plotly Python to have:

• ticktext control only the visual axis tick label
• hoverformat (or any other property) control the unified hover x-label independently

…without modifying tick label text or switching away from tickmode: "array"?

If DOM manipulation is the right path, what is the correct selector for the x-axis label element inside the unified hover tooltip in hovermode: "x unified"?

Environment

• plotly Python package (latest)
• Plotly.js loaded via CDN (include_plotlyjs="cdn")
• Rendered inside a Streamlit components.html iframe