React Chart - Tooltip

A tooltip displays information about a series point when you hover the mouse pointer over it.

The following plugins implement the tooltip:

  • EventTracker - allows you to handle clicking/hovering a point or series
  • Tooltip - renders the tooltip

Note that the plugin order is important.

Basic Setup

Import the plugins listed above to create a Chart with tooltip support.

Tooltip in Uncontrolled Mode

In uncontrolled mode, add the Tooltip plugin to the chart to show a tooltip for hovered points.

Tooltip in Controlled Mode

In controlled mode, specify in the Tooltip plugin’s targetItem property and handle the onTargetItemChange event to control the tooltip’s visibility externally.