Estoy usando Hint de React-Vis, pero aunque le paso a mi Hint el valor que debería trazar nuevamente, se sale del alcance. ¿Cómo puedo asegurarme de que esté encima de la altura de la barra vertical?

Código Enlace aquí.

o el código completo aquí:

 export default class Example extends React.Component { state = { hintValue: "" }; _onNearestX = (value) => { this.setState({ hintValue: value }); }; render() { return ( <div> <XYPlot width={300} height={300} stackBy="y" xType="ordinal"> <VerticalGridLines /> <HorizontalGridLines /> <XAxis /> <YAxis /> <VerticalBarSeries cluster="Q2" color="red" data={[ { x: 1, y: 5 }, { x: 2, y: 15 } ]} onNearestXY={this._onNearestX} /> <VerticalBarSeries cluster="Q2" color="grey" data={[ { x: 1, y: 2 }, { x: 2, y: 11 } ]} onNearestXY={this._onNearestX} /> <VerticalBarSeries cluster="Q1" color="green" data={[ { x: 1, y: 8 }, { x: 2, y: 16 } ]} onNearestXY={this._onNearestX} /> <VerticalBarSeries cluster="Q1" color="lightgreen" data={[ { x: 1, y: 3 }, { x: 2, y: 12 } ]} onNearestXY={this._onNearestX} /> <VerticalBarSeries cluster="Q1" color="yellow" data={[ { x: 1, y: 1 }, { x: 2, y: 1 } ]} onValueClick={(datapoint, event) => { console.log(datapoint, event); // Some SVG element }} onNearestXY={this._onNearestX} /> {this.state.hintValue !== "" && ( <Hint value={this.state.hintValue}> <div className="hint"> <p>X: {this.state.hintValue.x}</p> <p>Y: {this.state.hintValue.y}</p> </div> </Hint> )} </XYPlot> </div> ); } } const rootElement = document.querySelector("#root"); if (rootElement) { render(<Example />, rootElement); }