Tooltip in React Chart

A tooltip in charts provides additional information about a data point when hovered over or clicked. It enhances understanding by displaying contextual details without cluttering the visual representation

Default tooltip

By default, tooltips are disabled in the chart. To enable them and display data details when hovering over data points, set the enable property to true in the ChartTooltip component.

Shared tooltip

To display data from multiple series or points at once, set the shared property to true in the ChartTooltip component. This is especially useful in multi-series charts, where comparing values across different datasets is important

Custom tooltip content

By default, the tooltip displays the x and y values of points. To show additional information from the data source in the tooltip, you can use the tooltipField property. Utilize the ${point.tooltip} placeholder to display the specified tooltip content.

Fixed tooltip

By default, tooltips follow the mouse pointer. But if you want the tooltip to appear at a specific location on the chart regardless of where the user hovers, you can use the location property in the ChartTooltip component.

Format the tooltip

You can customize the content displayed in tooltips using the format property in the ChartTooltip component. This allows you to define a template string with dynamic placeholders that automatically display relevant data values.

Common placeholders include:

• ${series.name} – Displays the name of the data series.
• ${point.x} – Shows the value on the X-axis.
• ${point.y} – Shows the value on the Y-axis.

Using these placeholders helps make tooltips more informative, interactive, and user-friendly, enhancing the overall data visualization experience.

Tooltip header

In chart tooltips, the header refers to the top line that presents essential context such as a category name, timestamp, or data group label when hovering over a chart element. You can manage its visibility using the showHeaderLine property within the ChartTooltip component.

Render Custom Visuals

Render custom tooltip content by supplying a template function to the ChartTooltip template property. The function receives ChartTooltipTemplateProps and returns a JSX element.

Template context (ChartTooltipTemplateProps):

• x: X-value of the data point (from series xField).
• y: Y-value of the data point (from series yField).
• tooltip: Optional tooltip text mapped from the series tooltipField if provided.
• seriesIndex: Zero-based index of the series containing this point.
• pointIndex: Zero-based index of the point within its series.

Use the template to compose richer tooltips—images, formatted numbers, multi-line layouts, and additional metadata—beyond the default x/y display.

Customize tooltip appearance

You can personalize the look and feel of the tooltip in the ChartTooltip component using various styling properties.

Key Properties:

• fill: Sets the background color of the tooltip.

• border: Customizes the border's color, width, and style.

Text Styling with textStyle:

Use the textStyle property to fine-tune the appearance of tooltip text. You can adjust:

• fontWeight

• fontStyle

• opacity

• fontFamily

• color

• fontSize