GraphTooltip.js

class GraphTooltip extends React.Component {
  render() {
    const {datum, x, y, color} = this.props;

    return (
      <g style={{pointerEvents: 'none'}}>
        <foreignObject x={x} y={y} width="1" height="1">
          <div
            className="advisor-clients-portfolio-analytics-historical-tooltip-dot"
            style={{backgroundColor: color}}
          >
            <div
              className="advisor-clients-portfolio-analytics-historical-tooltip-line"
              style={{backgroundColor: color, height: 500 - y - 56}}
            />
            <div className="advisor-clients-portfolio-analytics-historical-tooltip">
              <div>{moment(datum.date).format("MMMM DD, YYYY")}</div>
              <div>{datum["value-formatted"]} ({datum["total-change"] > 0 && "+"}{datum["total-change-formatted"]})</div>
            </div>
          </div>
        </foreignObject>
      </g>
    );
  }
}