API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

useActiveTooltipDataPoints

Returns the currently active data points being displayed in the Tooltip. Active means that it is currently visible; this hook will return undefined if there is no current interaction.

This follows the <Tooltip /> props, if the Tooltip element is present in the chart. If there is no <Tooltip /> then this hook will follow the default Tooltip props.

Data point is whatever you pass as an input to the chart using the data= prop.

This returns an array because a chart can have multiple graphical items in it (multiple Lines for example) and tooltip with shared= will display all items at the same time.

Returns undefined when used outside a chart context.

Available since Recharts 3.1

Related Links

import { Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, createHorizontalChart } from 'recharts';
import { generateMockData, MockDataType, RechartsDevtools } from '@recharts/devtools';

const data: Array<MockDataType> = generateMockData(6, 26213);

const Typed = createHorizontalChart<MockDataType, string, number>()({ XAxis, YAxis, Tooltip, Line });

export default function Example() {
  return (
    <Typed.LineChart
      style={{ width: '100%', maxWidth: '700px', height: '100%', maxHeight: '70vh', aspectRatio: 1.618 }}
      responsive
      data={data}
      margin={{
        top: 5,
        right: 0,
        left: 0,
        bottom: 5,
      }}
    >
      <CartesianGrid />
      <Typed.XAxis dataKey="label" />
      <Typed.YAxis width="auto" />
      <Tooltip />
      <Legend />
      <Typed.Line dataKey="x" />
      <Typed.Line dataKey="y" />
      <RechartsDevtools />
    </Typed.LineChart>
  );
}

Return value

Array<T> | undefined

Data points that are currently visible in a Tooltip