Back to Gallery
Multipoint Tooltip Labels
<VictoryChart domainPadding={{ y: 10 }} containerComponent={ <VictoryVoronoiContainer voronoiDimension="x" labels={({ datum }) => `y: ${datum.y}`} labelComponent={ <VictoryTooltip cornerRadius={0} flyoutStyle={{ fill: "white" }} />} />} > <VictoryLine data={[ { x: 1, y: 5, l: "one" }, { x: 1.5, y: 5, l: "one point five" }, { x: 2, y: 4, l: "two" }, { x: 3, y: -2, l: "three" } ]} style={{ data: { stroke: "tomato", strokeWidth: ({ active }) => active ? 4 : 2 }, labels: { fill: "tomato" } }} /> <VictoryLine data={[ { x: 1, y: -3, l: "red" }, { x: 2, y: 5, l: "green" }, { x: 3, y: 3, l: "blue" } ]} style={{ data: { stroke: "blue", strokeWidth: ({ active }) => active ? 4 : 2 }, labels: { fill: "blue" } }} /> <VictoryLine data={[ { x: 1, y: 5, l: "cat" }, { x: 2, y: -4, l: "dog" }, { x: 3, y: -2, l: "bird" } ]} style={{ data: { stroke: "black", strokeWidth: ({ active }) => active ? 4 : 2 }, labels: { fill: "black" } }} /> </VictoryChart>