Area Hover Styles

const CustomArea = props => {

  if (!props.active) {

    return <Area {...props} />;

  } else {

    const { data, activeX, scale, style } = props;

    const index = data.findIndex(val => val._x.getTime() === activeX.getTime());

    const previousPoint = index === 0 ? activeX : data[index - 1]._x;

    const nextPoint = index === data.length - 1 ? activeX : data[index + 1]._x;

    // create a copy of the x dimension scale, and set the range to [0, 100] to easily calculate a percentage for the gradient offsets

    const percentScale = scale.x.copy().range([0, 100]);

    // calculate the percentages for current, previous, and next points

    const currentPercent = percentScale(activeX);

    const previousPercent = percentScale(previousPoint);

    const nextPercent = percentScale(nextPoint);

    const minPercent = currentPercent - (currentPercent - previousPercent) / 2;

    const maxPercent = currentPercent + (nextPercent - currentPercent) / 2;

​

    const gradientId = Math.random();

    const isBrowser =

      typeof window !== "undefined" && window.__STATIC_GENERATOR !== true;

    const loc = isBrowser ? window.location.href : "";

    const newStyle = Object.assign({}, style, {

      fill: `url(${loc}#${gradientId})`,

      stroke: "none"

    });

​

    return (

      <g>

        <defs>

          <linearGradient id={gradientId}>

            <stop offset="0%" stopColor={style.fill} />

            <stop offset={`${minPercent}%`} stopColor={style.fill} />

            <stop offset={`${minPercent}%`} stopColor={"tomato"} />

            <stop offset={`${maxPercent}%`} stopColor={"tomato"} />

            <stop offset={`${maxPercent}%`} stopColor={style.fill} />

            <stop offset="100%" stopColor={style.fill} />

          </linearGradient>

        </defs>

        <Area {...props} style={newStyle} />

      </g>

    );

  }

};

​

class App extends React.Component {

  constructor() {

    super();

    this.state = {

      activeX: null

    };

    this.setActiveX = this.onActivated.bind(this);

  }

​

  onActivated(points, props) {

    this.setState({ activeX: points[0]._x });

  }

​

  render() {

    return (

      <VictoryChart

        height={400}

        width={400}

        scale={{ x: "time" }}

        containerComponent={

          <VictoryVoronoiContainer onActivated={this.setActiveX} />

        }

      >

        <VictoryStack colorScale="blue">

          <VictoryArea

            data={[

              { x: new Date(1986, 1, 1), y: 2 },

              { x: new Date(1996, 1, 1), y: 3 },

              { x: new Date(2006, 1, 1), y: 5 },

              { x: new Date(2016, 1, 1), y: 4 }

            ]}

            dataComponent={<CustomArea activeX={this.state.activeX} />}

          />

​

          <VictoryArea

            data={[

              { x: new Date(1986, 1, 1), y: 4 },

              { x: new Date(1996, 1, 1), y: 3 },

              { x: new Date(2006, 1, 1), y: 2 },

              { x: new Date(2016, 1, 1), y: 5 }

            ]}

            dataComponent={<CustomArea activeX={this.state.activeX} />}

          />

          <VictoryArea

            data={[

              { x: new Date(1986, 1, 1), y: 3 },

              { x: new Date(1996, 1, 1), y: 1 },

              { x: new Date(2006, 1, 1), y: 4 },

              { x: new Date(2016, 1, 1), y: 2 }

            ]}

            dataComponent={<CustomArea activeX={this.state.activeX} />}

          />

        </VictoryStack>

      </VictoryChart>

    );

  }

}

​

ReactDOM.render(<App/>, mountNode);