Заново отображает значение указателя для отображения во всплывающей подсказке?

Редактировать:

Примечание о быстродействии. Если вы хотите сделать это отзывчивым, просто отрегулируйте chartBounds на основе отступов / полей, которые вы применили к компоненту диаграммы, и все будет в порядке.

Если вы пытаетесь сделать что-то более сложное и вам нужно передать высоту и ширину компоненту диаграммы для дополнительных расчетов, вам может помочь следующая статья: https://www.pluralsight.com/tech-blog/getting-size-and-position-of-an-element-in-react/

ПРИМЕЧАНИЕ. Это немного похоже на уловку и, возможно, не идеальное решение, но этого должно быть достаточно, чтобы вы встали на правильный путь.

Вы должны иметь возможность использовать поля chartX и chartY из onMouseMove. К сожалению, это просто значение пикселя под курсором, но вы сможете перевести его в диапазон, который вы используете для своего графика.

Вот пример, составленный с использованием примеров повторных диаграмм SimpleLineChart. Это должно работать, если вы просто хотите получить значение Y под курсором пользователя, и его можно расширить, чтобы получить значение X.

const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
      {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
      {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
      {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
      {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
      {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
      {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
      {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];


//The pixel bounds for the LineChart, 0,0 is the top left corner
// these were found using the inspector built into the web browser
// these are in pixels but correspond to the values used in your graph
// so 246 is 0 Y on the graph and 5 is 10000 Y on the graph (according to your data)
const chartBoundsY = {min: 246, max: 5}

// The bounds we are using for the chart
const chartMinMaxY = {min: 0, max: 10000}

// Convert the pixel value from the cursor to the scale used in the chart
const remapRange = value => {
  let fromAbs = value - chartBoundsY.min
  let fromMaxAbs =  chartBoundsY.max - chartBoundsY.min      

  let normal = fromAbs / fromMaxAbs

  let toMaxAbs = chartMinMaxY.max - chartMinMaxY.min
  let toAbs = toMaxAbs * normal

  return Math.ceil(toAbs + chartMinMaxY.min)
}

const SimpleLineChart = React.createClass({
  render () {
    return (
      <LineChart 
        width={600} height={300} data={data}
        margin={{top: 5, right: 30, left: 20, bottom: 5}}
        onMouseMove={props => {
          // We get the values passed into the onMouseMove event 
          if(props.isTooltipActive) {
            // If the tooltip is active then we display the Y value 
            // under the mouse using our custom mapping
            console.log(remapRange(props.chartY))
          }
        }}    
      >
       <XAxis dataKey="name"/>
       <YAxis/>
       <CartesianGrid strokeDasharray="3 3"/>
       <Tooltip/>
       <Legend />
       <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
      </LineChart>
    )
  }
})

ReactDOM.render(
  <SimpleLineChart />,
  document.getElementById('container')
)

Вы можете открыть этот пример в jsfiddle и вставить приведенный выше код в редактор JS, чтобы опробовать его на себе. http://recharts.org/en-US/examples

Вот документация по событию мыши для LineChart: http://recharts.org/en-US/api/LineChart

Это можно сделать с помощью опции масштабирования оси вместе с методом инвертирования d3.
Следующий отрывок кода должен дать вам представление.

const domainY = d3.extent(data, d => d[keyY])
const scaleY = d3.scaleLinear().domain(domainY).range([0, 1])

<AreaChart
 onMouseDown={(e) => console.log(scaleY.invert(e.chartY))}
 ...

<YAxis
 domain={['auto', 'auto']}
 dataKey={keyY}
 type="number"
 scale={scaleY}
 ...