Skip to content

Instantly share code, notes, and snippets.

@tylermassey
Created April 19, 2018 21:37
Show Gist options
  • Select an option

  • Save tylermassey/87caa4dce8b492ab49e44eb47e796694 to your computer and use it in GitHub Desktop.

Select an option

Save tylermassey/87caa4dce8b492ab49e44eb47e796694 to your computer and use it in GitHub Desktop.
Victory tooltip issue with VictoryVoronoiContainer and VictoryGroup
import * as React from 'react';
import {
VictoryAxis,
VictoryChart,
VictoryGroup,
VictoryLine,
VictoryScatter,
VictoryTooltip,
VictoryVoronoiContainer,
} from 'victory';
interface Datum {
x: number;
y: number;
}
const data: Datum[][] = [
[{ x: 1, y: 5 }, { x: 1.5, y: 5 }, { x: 2, y: 4 }, { x: 3, y: -2 }],
[{ x: 1, y: -3 }, { x: 2, y: 5 }, { x: 3, y: 3 }],
[{ x: 1, y: 5 }, { x: 2, y: -4 }, { x: 3, y: -2 }],
];
const colors = ['#E94B3C', '#6F9FD8', '#92B558'];
class VoronoiTest extends React.Component<{}, {}> {
render() {
return (
<div style={{ height: 600, width: 600 }}>
<VictoryChart
containerComponent={
<VictoryVoronoiContainer
voronoiDimension="x"
labels={(d: Datum) => `y: ${d.y}`}
labelComponent={
<VictoryTooltip
cornerRadius={0}
flyoutStyle={{ filname: 'white' }}
/>
}
/>
}
>
<VictoryAxis />
{data.map((d: Datum[], index: number) => (
<VictoryGroup key={index} data={d}>
<VictoryLine
style={{
data: {
stroke: colors[index],
},
}}
/>
<VictoryScatter
style={{
data: {
fill: colors[index],
},
}}
/>
</VictoryGroup>
))}
</VictoryChart>
</div>
);
}
}
export default VoronoiTest;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment