Skip to content

Add interaction support (onclick, onmouseenter, onmouseleave, onmousemove) to Area marks #130

@spandl

Description

@spandl

Is your feature request related to a problem? Please describe.
Creating a unified way adding interactions to Plots using the Area mark

Describe the solution you'd like
The Area marks (AreaY, AreaX, Area) currently do not support interaction event handlers like onclick, onmouseenter, onmouseleave, and onmousemove, while other marks such as Line, Dot, and Bar do support these interactions.

Current Behavior

<AreaY
  data={data}
  x="date"
  y="value"
  onclick={handleClick}  <!-- Does not work -->
  onmouseenter={handleHover}  <!-- Does not work -->
/>

Expected Behavior

Area marks should support the same interaction handlers as other marks:

<AreaY
  data={data}
  x="date"
  y="value"
  onclick={handleClick}
  onmouseenter={handleHover}
  onmouseleave={handleLeave}
  onmousemove={handleMove}
/>

Describe alternatives you've considered
Currently, we need to implement custom interaction management by:

  • Querying DOM elements with querySelector('.svelteplot-area')
  • Manually adding event listeners
  • Using isPointInFill() for hit testing
  • Managing hover states through custom CSS classes
    This approach is fragile and requires significant boilerplate code.

Additional context

Use Cases

Tooltips: Show data details when hovering over area segments
Filtering: Click to select/deselect area segments
Highlighting: Visual feedback on hover for better UX
Data exploration: Interactive drill-down functionality

Proposed Solution

Add the same interaction props that exist on other marks to the Area components, allowing direct event handler binding similar to Line and Dot marks.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions