grouped voronoi tooltips

HTML

<script src="https://unpkg.com/react@15.5.4/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/prop-types@15.5.8/prop-types.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<script src="https://npmcdn.com/victory@latest/dist/victory.min.js"></script>
<div id="app"></div>

Babel + JSX

/* Victory requires `react@^15.5.0` and `prop-types@^15.5.0` */
const { VictoryChart, VictoryScatter, VictoryLine, VictoryGroup, VictoryVoronoiContainer, VictoryTooltip } = Victory;
const renderTarget = document.getElementById('app');

class App extends React.Component {
	getData() {
    return _.range(3).map(() => {
      return [
        {
          x: "rabbits",
          y: _.random(1, 5)
        },
        {
          x: "cats",
          y: _.random(1, 10)
        },
        {
          x: "dogs",
          y: _.random(2, 10)
        },
        {
          x: "birds",
          y: _.random(2, 10)
        },
        {
          x: "frogs",
          y: _.random(2, 15)
        }
      ];
    });
  }
  
  render() {
  	const data = this.getData();
    return (
      <VictoryChart
        domainPadding={{ y: 20 }}
        containerComponent={<VictoryVoronoiContainer />}
      >
        {data.map((d) =>
          <VictoryGroup
            data={d}
            labels={d => `y: ${d.y}`}
            labelComponent={<VictoryTooltip 
              cornerRadius={0}
              pointerLength={0}
              flyoutStyle={{
                stroke: "none",
                fill: "blue"
              }}
            />}
          >
            <VictoryLine />
            <VictoryScatter />
          </VictoryGroup>
        )}
      </VictoryChart>
      );
    }
 }
 
ReactDOM.render(<App/>, renderTarget);