Victory Charts with multiple lines and tooltips - css

Question

I am making a graph which must zoom and display tooltips for each data point. In Victory's documentation there is a multi-line chart with tooltips however if you adjust the data set, the tooltips overlap. I found that VictoryPortal is a mechanism for overcoming this but it appears that even in the linked example, it is using VictoryPortal. (The tooltip's props has renderInPortal: true,)
To overcome this I created a second VictoryGroup after the Lines/Scatters which was just Scatters of all the data sets combined and gave them opacity: 0 so it looked like you were hovering the original Scatter dot. This approach works but feel like there must be a better, cleaner way that I'm missing here. I couldn't figure out how to make a snippet work with Victory so here's the code in question:
Method for rendering Lines/Scatters for individual data sets together in a group:
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>
);
}
Any input or advice would be greatly appreciated. Thanks in advance!

Answer 1

I started with a similar solution but finally I had some successful results with the VoronoiContainer component and using the tooltip from there.
https://formidable.com/open-source/victory/docs/victory-voronoi-container/
You have to put a VoronoiContainer as a containerComponent in VictoryChart.
With that method the VictoryScatter is unnecessary.