You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When using simple tooltips without VictoryVoronoi for VictoryBar, VictoryScatter and I guesss probably all other kinds of charts, the tooltip will only display when it is not a custom one
meaning I can only use labelComponent={<VicoryTooltip />} and not labelComponent={{<CustomTooltip />}
The active prop does not seem to get passed. Maybe the events get lost?
Code Snippet from the website https://commerce.nearform.com/open-source/victory/guides/tooltips#customizing-tooltips
class CustomFlyout extends React.Component {
render() {
const {x, y, orientation} = this.props;
const newY = orientation === "bottom" ? y - 35 : y + 35;
return (
<g>
<circlecx={x}cy={newY}r="20"stroke="tomato"fill="none"/>
<circlecx={x}cy={newY}r="25"stroke="orange"fill="none"/>
<circlecx={x}cy={newY}r="30"stroke="gold"fill="none"/>
</g>
);
}
}
class CustomTooltip extends React.Component {
render() {
// This does not work
return (<VictoryTooltip
{...this.props}
//text="test"
//active // it shows up properly when active is true!
/>)
}
}
class App extends React.Component {
render() {
return (
<VictoryChart
domain={{ x: [0, 11], y: [-10, 10] }}
>
<VictoryBar
labelComponent={
// does not work
<CustomTooltip
//<VictoryTooltip // works
//flyoutComponent={<CustomFlyout/>}
/>
}
data={[
{x: 2, y: 5, label: "A"},
{x: 4, y: -6, label: "B"},
{x: 6, y: 4, label: "C"},
{x: 8, y: -5, label: "D"},
{x: 10, y: 7, label: "E"}
]}
style={{
data: {fill: "tomato", width: 20},
labels: { fill: "tomato"}
}}
/>
</VictoryChart>
);
}
}
render(<App/>);
The reason why I don't want to use a VictoryVoronoiContainer is because I want to see the Tooltips when hovering ther bar and not the nearest Point.
When I have two bars, one has a high value and one a low value and I use VictoryVoronoiContainer, the tooltip will be shown for the low value bar, even when my mouse is on the higher value bar
Steps to reproduce
1. Copy the Code perhaps into the live editor on the website
2. Hover over a bar, see nothing
3. Change the labelComponent to VictoryTooltip
4. Hover over a bar, see a tooltip
Expected behavior
The tooltip should show up, even when the VictoryTooltip is wrapped in another component
Actual behavior
The active prop never gets passed, so the CustomTooltip never shows
Example of tooltips being wrong when using VictoryVoronoiContainer and having the curser hovering over the left bar, but the tooltip shows the middle bar
Is there an existing issue for this?
Code of Conduct
Victory version
37.0.2
Code Sandbox link
No response
Bug report
Steps to reproduce
Expected behavior
Actual behavior
Environment
The text was updated successfully, but these errors were encountered: