While working on a graph that requires zooming and displaying tooltips for each data point, I encountered an issue with overlapping tooltips when adjusting the data set in Victory's documentation. I came across VictoryPortal as a solution to this problem, but it seems that even in the provided example using VictoryPortal, there are still some challenges (The tooltip's props has renderInPortal: true,).
To address this issue, I decided to create a second VictoryGroup after the Lines/Scatters, which consisted of Scatters representing all the combined data sets with opacity: 0 to give the impression of hovering over the original Scatter dot. While this method works, I believe there may be a better, cleaner approach that I haven't considered yet. Unfortunately, I couldn't figure out how to make a snippet work with Victory, so here is the relevant code:
Method for rendering Lines/Scatters for individual data sets grouped together:
renderLine = (m, i) => (
this.state.s[i]
? <VictoryGroup
key={i}
color={m.color}
data={m.data}
labels={(d) => `y: ${d.y}\nx: ${d.x}`}
labelComponent={
<VictoryTooltip
cornerRadius={0}
style={{ fontSize: 10 }}
/>}
>
<VictoryLine />
<VictoryScatter size={(d, a) => a ? 8 : 3} />
</VictoryGroup>
: null
)
And my render method:
render() {
const { renderLine } = this
return (
<div style={{ width: '50vw', margin: '0 auto' }}>
<VictoryChart
height={400}
width={400}
padding={30}
containerComponent={<VictoryZoomContainer />}>
<VictoryAxis
domain={{ x: [-180, 180] }}
standalone
label={'Angle (°)'}
style={axisStyle}
crossAxis={false}
orientation={'bottom'}
axisLabelComponent={
<VictoryLabel orientation={'top'} y={'97%'} verticalAnchor={'end'} />
}
gridComponent={
<Line
style={{
...axisStyle.grid,
transform: 'translate3d(0,100%,0)'
}}
/>
}
tickCount={12}
tickLabelComponent={<VictoryLabel dy={-5} />}
/>
<VictoryAxis
dependentAxis
orientation={'left'}
label={'Discriminiation (dB)'}
axisLabelComponent={
<VictoryLabel orientation={'left'} x={15} />
}
standalone
offsetX={30}
style={axisStyle}
/>
{masterData.map((d, i) => renderLine(d, i))}
<VictoryGroup
color={'rgba(0,0,0,0)'}
data={[...dataSet, ...dataSet2, ...dataSet3, ...dataSet4]}
labels={(d) => `y: ${d.y}\nx: ${d.x}`}
labelComponent={
<VictoryTooltip
cornerRadius={0}
style={{ fontSize: 10 }}
/>}
>
<VictoryScatter size={(d, a) => a ? 8 : 3} />
</VictoryGroup>
</VictoryChart>
</div>
);
}
If you have any insights or suggestions, please do share. Thank you in advance!