Tooltips
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.
Series Tooltip
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 background
and border
options.
Tooltip configuration
To enable and configure the tooltip for all series, use the ChartTooltip
component. To enable and configure the tooltip for a specific series, use the ChartSeriesItemTooltip
component.
The following example demonstrates how to configure the tooltip globally and to override an option for a specific series.
Customizing Content
By default, the content of the tooltip is determined based on the point type. To customize the tooltip content, either:
Using the format Option
The following example demonstrates how to customize the content of the tooltip through the format
configuration.
import {
Chart,
ChartTooltip,
ChartSeries,
ChartSeriesItem,
ChartSeriesItemTooltip
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const ChartContainer = () => (
<Chart>
<ChartTooltip format="Default Content {0}" />
<ChartSeries>
<ChartSeriesItem data={seriesData} />
<ChartSeriesItem data={seriesData}>
<ChartSeriesItemTooltip format="Series 1 value: {0}" />
</ChartSeriesItem>
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);
Specifying a Template
To specify a template, use the render
prop of the ChartTooltip
or ChartSeriesItemTooltip
components.
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 SharedTooltipContext
or TooltipContext
depending on whether the tooltip is shared
or not. The type of of context when defined on the ChartSeriesItemTooltip
is always of type TooltipContext
.
The following example demonstrates how to customize the content by using a render
prop.
import {
Chart,
ChartTooltip,
ChartSeries,
ChartSeriesItem,
ChartSeriesItemTooltip
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const defaultTooltipRender = ({ point }) => (`Default Content ${point.value}`);
const nestedTooltipRender = ({ point }) => (<span><b>Series 1 value: {point.value}</b></span>);
const ChartContainer = () => (
<Chart>
<ChartTooltip render={defaultTooltipRender} />
<ChartSeries>
<ChartSeriesItem data={seriesData} />
<ChartSeriesItem data={seriesData}>
<ChartSeriesItemTooltip render={nestedTooltipRender} />
</ChartSeriesItem>
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);
Shared Tooltip
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 ChartTooltip
component.
The following example demonstrates how to enable the shared tooltip.
import {
Chart,
ChartCategoryAxis,
ChartCategoryAxisItem,
ChartTooltip,
ChartSeries,
ChartSeriesItem,
ChartSeriesItemTooltip
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const categories = ['A', 'B', 'C'];
const ChartContainer = () => (
<Chart>
<ChartTooltip shared={true} />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} />
</ChartCategoryAxis>
<ChartSeries>
<ChartSeriesItem data={seriesData} />
<ChartSeriesItem data={seriesData} />
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);
Customizing Content
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 ChartTooltip
component.
The callback function receives a single parameter of type SharedTooltipContext
.
import {
Chart,
ChartCategoryAxis,
ChartCategoryAxisItem,
ChartTooltip,
ChartSeries,
ChartSeriesItem
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const categories = ['A', 'B', 'C'];
const SharedTooltip = (props) => {
const { category, points } = props;
return (
<div>
<div>{category}</div>
{points.map((point) => (<div>{point.series.name} : {point.value}</div>))}
</div>
);
};
const sharedTooltipRender = (context) => (<SharedTooltip {...context} />);
const ChartContainer = () => (
<Chart>
<ChartTooltip shared={true} render={sharedTooltipRender} />
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories} />
</ChartCategoryAxis>
<ChartSeries>
<ChartSeriesItem name="A" data={seriesData} />
<ChartSeriesItem name="B" data={seriesData} />
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);
Crosshair Tooltip
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.
Using in Categorical Charts
The following example demonstrates how to enable the crosshair tooltips for the Categorical charts.
import {
Chart,
ChartCategoryAxis,
ChartCategoryAxisItem,
ChartCategoryAxisCrosshair,
ChartCategoryAxisCrosshairTooltip,
ChartValueAxis,
ChartValueAxisItem,
ChartValueAxisCrosshair,
ChartValueAxisCrosshairTooltip,
ChartSeries,
ChartSeriesItem
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const categories = ['A', 'B', 'C'];
const ChartContainer = () => (
<Chart>
<ChartCategoryAxis>
<ChartCategoryAxisItem categories={categories}>
<ChartCategoryAxisCrosshair>
<ChartCategoryAxisCrosshairTooltip />
</ChartCategoryAxisCrosshair>
</ChartCategoryAxisItem>
</ChartCategoryAxis>
<ChartValueAxis>
<ChartValueAxisItem>
<ChartValueAxisCrosshair>
<ChartValueAxisCrosshairTooltip />
</ChartValueAxisCrosshair>
</ChartValueAxisItem>
</ChartValueAxis>
<ChartSeries>
<ChartSeriesItem data={seriesData} />
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);
Using in Scatter Charts
The following example demonstrates how to enable the crosshair tooltips for the Scatter charts.
import {
Chart,
ChartYAxis,
ChartYAxisItem,
ChartXAxis,
ChartXAxisItem,
ChartSeries,
ChartSeriesItem
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [[1, 1], [2, 2], [3, 3]];
const ChartContainer = () => (
<Chart>
<ChartXAxis>
<ChartXAxisItem crosshair={{ visible: true, tooltip: { visible: true }}} />
</ChartXAxis>
<ChartYAxis>
<ChartYAxisItem crosshair={{ visible: true, tooltip: { visible: true }}} />
</ChartYAxis>
<ChartSeries>
<ChartSeriesItem type="scatter" data={seriesData} />
</ChartSeries>
</Chart>
);
ReactDOM.render(
<ChartContainer />,
document.querySelector('my-app')
);