Skip to content

[FEATURE]: Enable click and hover events anywhere #7699

@alexshoe

Description

@alexshoe

Summary

As part of an ongoing Plotly Professional Services contract, Kobold Metals has requested multiple feature requests/bug fixes for Plotly.js. One of these feature requests is the ability to enable hover and click events anywhere on the plot area, not just directly over trace data points.

This feature enhancement would be useful for:

  • Creating custom spikelines or crosshairs that track cursor position across the entire plot
  • Clicking on layout images (e.g., drill hole images) to determine coordinates/depth at the click location
  • Distance measurement between two arbitrary points

Problem Statement

Currently, Plotly.js hover and click events (plotly_hover, plotly_click) only fire when the cursor is directly over a trace data point. The events do not fire when the cursor is in empty plot space between data points.

Key Decision: How should we expose this functionality, and what should the event data contain when no trace is under the cursor?

Proposed Solution

API

Add two new opt-in boolean layout attributes. Both would default to false.

layout: {
  hoveranywhere: true,
  clickanywhere: true
}

Details

  • Use existing plotly_hover and plotly_click events
  • Need some sort of throttling/limiting number of events to prevent performance overload

Implementation Plan (with rough timeline)

  1. Add attributes and defaults (Week 1)

    • Add hoveranywhere and clickanywhere attributes to src/components/fx/layout_attributes.js
    • Add default value coercion in src/components/fx/layout_defaults.js
  2. Modify hover logic (Week 1-2)

    • In src/components/fx/hover.js, modify the _hover() function
    • When hoverData is empty but hoveronanywhere is true, emit event with cursor coordinates
  3. Modify click logic (Week 2-3)

    • In src/components/fx/click.js, add handling for clickonanywhere
    • Calculate click coordinates in data space even when no trace is hit
  4. Testing (Week 3)

    • Write mock and Jasmine tests for this feature

Questions + Things to consider

  1. Should we use new event names (plotly_hover_anywhere) or reuse existing events?
  2. Should clickonanywhere also affect double-click events?
  3. Multiple subplots: I believe events should not fire when over the gaps between subplots, right? Same with being outside the plot area of a single-plot figure'
  4. Multiple overlaid axes: do we show the values of both/all axes at the same position?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions