Skip to content

add style customization to hoverlabel #8115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Lexachoc wants to merge 4 commits into
base: main
Choose a base branch
from
Open

add style customization to hoverlabel #8115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
48efa70
add style customization to hoverlabel
Lexachoc Oct 10, 2026
9a10c97
add draftlog
Lexachoc Oct 10, 2026
52afd34
revert accidental mock change
Lexachoc Oct 10, 2026
1926941
improve default secondary hover label text contrast
Lexachoc Oct 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions draftlogs/8115_add.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)]

@Lexachoc Lexachoc Oct 10, 2026

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)]

18 changes: 18 additions & 0 deletions src/components/fx/attributes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,24 @@ module.exports = {
arrayOk: true,
description: 'Sets the border color of the hover labels for this trace.'
}),
borderwidth: extendFlat({}, hoverLabelAttrs.borderwidth, {
description: 'Sets the border width (in px) of the hover labels for this trace.'
}),
borderradius: extendFlat({}, hoverLabelAttrs.borderradius, {
description: 'Sets the border radius (in px) of the hover labels for this trace.'
}),
borderpad: extendFlat({}, hoverLabelAttrs.borderpad, {
description: 'Sets the padding (in px) between the text and the border of the hover labels for this trace.'
}),
namecolor: extendFlat({}, hoverLabelAttrs.namecolor, {
description: 'Sets the text color of the secondary hover label for this trace.'
}),
bgnamecolor: extendFlat({}, hoverLabelAttrs.bgnamecolor, {
description: 'Sets the background color of the secondary hover label for this trace.'
}),
shadow: extendFlat({}, hoverLabelAttrs.shadow, {
description: 'Sets the shadow of the hover labels for this trace.'
}),
font: fontAttrs({
arrayOk: true,
editType: 'none',
Expand Down
Loading
Loading