Active Index

Recharts 2.x used to have a prop named activeIndex that was setting which item the user was interacting with. In version 3.0, this prop has been removed.

Why?

Trouble is that this prop was already set internally - by Tooltip component. Things behaved weird when both the activeIndex and Tooltip were set. Unpredictable!

What should I do instead?

Tooltip component is controlling user interaction with the chart. Use Tooltip!

Tooltip has several props that allow you to control the interaction in detail:

• defaultIndex: Sets the initial index of the item that is highlighted when the chart is rendered, before any user interactions
• active: If true, the tooltip remains active even when the user interaction has completed (for example, when user hovers over a different item)
• content: This prop decides what content is displayed in the tooltip. You can turn off the rendering completely by passing content={() => null}.
• cursor: Is what renders in the plot area, to draw attention to the item that is being interacted with. You can turn it off by passing cursor=.

Example 1: PieChart with default index

The example below shows how to use the defaultIndex prop to set the initial item that is highlighted when the chart is rendered.

Also see GitHub issue #5999 for discussion.

View this example in Storybook

Example 2: BarChart with clickable items and hidden tooltip

The example below shows how to use the trigger prop to highlight the item that is being clicked, and how to hide the tooltip by passing content={() => null} and cursor={false}.

Also see GitHub issue #6047 for discussion.