Multiple VictoryLine - Show tooltip when hovering specific line

[erickriva]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Question

I got 2 types of tooltips in my tests:
- 1 tooltip with all values for Y axis
- each line has a tooltip, but hovering Y axis makes tooltip from all lines to show

Plus, when applying VictoryVoronoiContainer (https://commerce.nearform.com/open-source/victory/docs/charts/line#line-charts---tooltips), VictoryLegend won't work.

There's a way to create tooltips for multiple VictoryLine in a VictoryChart that only stay visible when hovering that specific line (and with legend working)?

[erickriva]

I was few lines away from my answer: <VictoryGroup/>

            <VictoryChart
                theme={VictoryTheme.clean}
                width={1000}
                domainPadding={{ x: 10 }}
                padding={{ left: 40, right: 30, top: 40, bottom: 60 }}>
                {dataGroupedByCategory.map((c) => (
                    <VictoryGroup
                        key={c.workItemType}
                        labels={({ datum }) => datum.y}
                        labelComponent={
                            <VictoryTooltip style={{ fontSize: 10 }} />
                        }
                        data={c.dates.map((d) => ({
                            x: d.date,
                            y: d.days,
                        }))}
                        dataComponent={
                            <VictoryVoronoiContainer
                                voronoiDimension="x"
                                labels={({ datum }) => datum.y}
                                labelComponent={
                                    <VictoryTooltip style={{ fontSize: 10 }} />
                                }
                            />
                        }>
                        <VictoryLine
                            style={{
                                labels: { fontSize: 10, fill: "white" },
                                data: {
                                    stroke: seedColor(c.workItemType).toHex(),
                                },
                            }}
                        />

                        <VictoryScatter />
                    </VictoryGroup>
                ))}

                <VictoryAxis
                    style={{
                        axis: { stroke: "#444" },
                        axisLabel: { fontSize: 11, fill: "#aaa" },
                        tickLabels: { fontSize: 10, fill: "white" },
                    }}
                />

                <VictoryAxis
                    dependentAxis
                    style={{
                        axis: { stroke: "#444" },
                        ticks: { stroke: "#444" },
                        tickLabels: { fontSize: 10, fill: "white" },
                    }}
                />

                <VictoryLegend
                    y={270}
                    borderComponent={<div />}
                    style={{
                        labels: { fontSize: 10, fill: "white" },
                    }}
                    data={dataCategories.map((c) => ({
                        name: c,
                        symbol: { fill: seedColor(c).toHex() },
                    }))}
                />
            </VictoryChart>

Result: