FormidableLabs / FormidableLabs/victory

Animate prop causes VictoryTooltip to change color names to rgb strings

Open
#2,368 0 comments 2 reactions 0 assignees View on GitHub
Issue: Accepted Type: Bug :bug:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

**Describe the bug**
I have a `` chart where each point displays a tooltip with the `label` associated with that point, like so: ` datum.label}`. If I add an `animate` prop to the `` holding my scatterplot then any point with a `label` matching a [CSS color name](https://www.w3schools.com/cssref/css_colors.asp) will have its tooltip show the rgb string of that color instead of the actual label string. For example, if a point has the `label` "[Tomato](https://www.w3schools.com/colors/color_tryit.asp?color=Tomato)", then adding the `animate` prop causes the tooltip for that point to display "rgb(255, 99, 71)".

**Victory version**
Victory 36.2.0

**Code Sandbox link**
[Sandbox link](https://codesandbox.io/s/victorytooltip-text-color-names-bu2rym?file=/index.js:365-381)

**To Reproduce**
1. Visit the sandbox link above
2. Hover over each point. Notice that each point with a `label` set to a CSS color name will have a tooltip showing an rgb string
3. Remove the `animate` prop from the ``
4. Hover over each point again. Notice that labels with color name labels are no longer changed to rgb strings

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.