voronoi label component victory

AreaGraph.js

want it to be similar to this https://jsfiddle.net/boygirl/z00r6h45/

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {
  VictoryChart,
  VictoryLine,
  VictoryTheme,
  VictoryTooltip,
  VictoryLabel,
  VictoryCursorContainer,
  VictoryArea,
  VictoryAxis,
  VictoryScatter,
  VictoryVoronoiContainer,
} from 'victory-native';
import PropTypes from 'prop-types';

const data = [
  { a: new Date(1982, 1, 1), y0: 0, y: 15 },
  { a: new Date(1983, 1, 1), y0: 0, y: 16 },
  { a: new Date(1984, 1, 1), y0: 0, y: 17 },
  { a: new Date(1985, 1, 1), y0: 0, y: 18 },
  { a: new Date(1986, 1, 1), y0: 0, y: 19 },
  { a: new Date(1987, 1, 1), y0: 0, y: 20 },
  { a: new Date(1993, 1, 1), y0: 0, y: 25 },
  { a: new Date(1997, 1, 1), y0: 0, y: 35 },
  { a: new Date(2001, 1, 1), y0: 0, y: 38 },
  { a: new Date(2005, 1, 1), y0: 0, y: 40 },
  { a: new Date(2011, 1, 1), y0: 0, y: 44 },
  { a: new Date(2015, 1, 1), y0: 0, y: 49.5 }];

const newData = [
  { a: new Date(1982, 1, 1), y0: 0, y: 10 },
  { a: new Date(1987, 1, 1), y0: 0, y: 15 },
  { a: new Date(1993, 1, 1), y0: 0, y: 20 },
  { a: new Date(1997, 1, 1), y0: 0, y: 30 },
  { a: new Date(2001, 1, 1), y0: 0, y: 35 },
  { a: new Date(2005, 1, 1), y0: 0, y: 38 },
  { a: new Date(2011, 1, 1), y0: 0, y: 40 },
  { a: new Date(2015, 1, 1), y0: 0, y: 45.5 }];

const dataDates = data.map(point => point.a);

class AreaGraph extends Component {
  constructor() {
    super();
    this.state = {
      activePoint: null,
      timeFrame: null,
    };
  }

  findClosestPointSorted(tapLocation) {
    // find current data

    // if there's no tap location registered
    if (tapLocation === null) return null;

    const start = new Date(dataDates[0]).getFullYear();
    const range = new Date(dataDates[dataDates.length - 1]).getFullYear() - start;

    const absoluteStart = Math.abs(dataDates[0]);
    const absoluteRange = Math.abs(dataDates[dataDates.length - 1]) - absoluteStart;

    console.log(absoluteRange);

    // find the nearest neighbor based on range
    const index = Math.round(((new Date(tapLocation).getFullYear() - start) / range) * (data.length - 1));


    // console.log('absoluted index', absolutedIndex);
    console.log('index', index);
    const foundData = data[index];

    // console.log(foundData);

    // sets the new active point in state
    return { x: foundData.a, y: foundData.y };
  }

  handleCursorChange(tapLocation) {
    this.setState({
      activePoint: (this.findClosestPointSorted(tapLocation)),
    });
  }


  render() {
    const { activePoint } = this.state;
    console.log(activePoint);

    // creating a one-point scatter
    const point = activePoint ?
      (<VictoryScatter
        labels={d => `${new Date(d.x).getFullYear()}, ${d.y}`}
        data={[activePoint]}
        style={{ data: { size: 100, fill: 'yellow' }, labels: { fill: 'white' } }}
      />)
      : null;

    return (
      <VictoryChart
        theme={VictoryTheme.material}
        // animate={{ duration: 500 }}
        containerComponent={
          <VictoryVoronoiContainer
            dimension="x"
            cursorDimension="x"
            onCursorChange={value => this.handleCursorChange(value)}
            // labelComponent={<VictoryLabel
            //   angle={90}
            //   verticalAnchor="middle"
            //   textAnchor="end"
            // />}
            labelComponent={
              <Text>Hey</Text>

            }

            x={'a'}
            labels={d => `${new Date(d.a).getFullYear()}, ${d.y}`}
          />
        }
      >
        <VictoryLine
          x="a"
          interpolation="basis"
          style={{
              data: { stroke: '#05EAE2', strokeWidth: 1 },
              labels: { fill: 'white' },
              parent: { border: '1px solid #ccc' },
            }}
          data={data}
        />

        <VictoryArea
          x="a"
          data={data}
          interpolation="basis"
          style={{ data: { fill: '#1D4A52', opacity: 0.8 } }}
        />
        <VictoryAxis
          tickFormat={x => new Date(x).getFullYear()}
          tickValues={[dataDates[0], dataDates[dataDates.length - 1]]}
        />

        <VictoryAxis
          tickFormat={tickLabel => `${Math.round(tickLabel)}%`}
            // y axis
          style={{
              axis: { stroke: 'transparent', strokeOpacity: 0.37, strokeWidth: 0.5 },
              tickLabels: { fill: '#44C5D4' },
              ticks: { stroke: 'transparent' },
              grid: { stroke: '#44C5D4', strokeOpacity: 0.37, strokeWidth: 0.5 },
            }}
          dependentAxis
        />
      </VictoryChart>
    );
  }
}


export default AreaGraph;