The Chart supports three types of tooltips.
The Chart tooltip types are:
- Series tooltip—A tooltip displayed for the hovered chart point.
- Shared tooltip—A tooltip displayed for the hovered chart category.
- Crosshair tooltip—A tooltip displayed for the axes crosshairs.
The series tooltip is displayed when the user hovers over a point and is used to show the point values or any additional information. By default, the color of the tooltip matches the color of the point to help associate the tooltip with that point. It is also possible to set it to a specific color by using the
The following example demonstrates how to configure the tooltip globally and to override an option for a specific series.
By default, the content of the tooltip is determined based on the point type. To customize the tooltip content, either:
The following example demonstrates how to customize the content of the tooltip through the
The callback passed to the
render props receives a single parameter - the context of the tooltip. When the
render prop is defined on the
ChartTooltip component, the context could be either of type
TooltipContext depending on whether the tooltip is
shared or not. The type of of context when defined on the
ChartSeriesItemTooltip is always of type
The following example demonstrates how to customize the content by using a
The shared tooltip is displayed when the user hovers over a category and is used for Categorical charts. The shared tooltip shows a summary of all points in the hovered category. To enable the shared tooltip, use the
shared option of the
The following example demonstrates how to enable the shared tooltip.
By default, the shared tooltip displays the category as a title and an item for each point in that category. To customize the content that is displayed for the points of a specific series, use the
format option, or the template for the series. To customize the entire content, add a
render prop to the
The callback function receives a single parameter of type
The crosshair tooltips are displayed next to the axes crosshairs and show the current value of the crosshairs. To enable the crosshair tooltip, use the specific axis crosshair-tooltip component.
The following example demonstrates how to enable the crosshair tooltips for the Categorical charts.
The following example demonstrates how to enable the crosshair tooltips for the Scatter charts.