Skip to content

add style customization to hoverlabel - #8115

Open
Lexachoc wants to merge 4 commits into
plotly:mainfrom
Lexachoc:feature-hoverlabel-custom-styles
Open

Lexachoc wants to merge 4 commits into
plotly:mainfrom
Lexachoc:feature-hoverlabel-custom-styles

Conversation

@Lexachoc

@Lexachoc Lexachoc commented Oct 10, 2026 •

Copy link
Copy Markdown
Contributor

Addresses some requests in #2342 without closing it.

This PR adds several new hoverlabel styling options based on the discussion in #2342.

New options:

  • hoverlabel.borderwidth — sets the hover label border width
  • hoverlabel.borderradius — sets the hover label border radius
  • hoverlabel.borderpad — sets the padding between the text and the border
  • hoverlabel.namecolor — sets the secondary hover label text color
  • hoverlabel.bgnamecolor — sets the secondary hover label background color
  • hoverlabel.shadow — sets a drop shadow on the hover label

Additional improvement

If hoverlabel.namecolor is not specified, the trace color is preserved when it has sufficient contrast against the secondary label background (WCAG 4.5:1). Otherwise, a contrasting text color is used automatically.

(Not sure whether this contrast improvement change belongs in this PR. Happy to move it out if preferred.)

Before/After

See the comparison in #2342 (comment).

@Lexachoc Lexachoc changed the title add style customization to hoverlabel add style customization to hoverlabel Oct 10, 2026
Comment thread draftlogs/8115_add.md
@@ -0,0 +1 @@
- Add `hoverlabel.borderwidth`, `hoverlabel.borderradius`, `hoverlabel.borderpad`, `hoverlabel.namecolor`, `hoverlabel.bgnamecolor`, and `hoverlabel.shadow` styling options [[#8115](https://github.com/plotly/plotly.js/pull/8115)] No newline at end of file

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
- Add `hoverlabel.borderwidth`, `hoverlabel.borderradius`, `hoverlabel.borderpad`, `hoverlabel.namecolor`, `hoverlabel.bgnamecolor`, and `hoverlabel.shadow` styling options [[#8115](https://github.com/plotly/plotly.js/pull/8115)]
- Add `hoverlabel.borderwidth`, `hoverlabel.borderradius`, `hoverlabel.borderpad`, `hoverlabel.namecolor`, `hoverlabel.bgnamecolor`, and `hoverlabel.shadow` styling options, and improve text contrast for secondary hover labels [[#8115](https://github.com/plotly/plotly.js/pull/8115)]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant