Charts / Chart / Elements / Tooltips
material theme

Tooltips

The Chart supports three types of tooltips.

The Chart tooltip types are:

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.

import {
    Chart,
    ChartTooltip,
    ChartSeries,
    ChartSeriesItem,
    ChartSeriesItemTooltip
} from '@progress/kendo-react-charts';

import 'hammerjs';

const seriesData = [1, 2, 3];

const ChartContainer = () => (
    <Chart>
        <ChartTooltip />
        <ChartSeries>
          <ChartSeriesItem data={seriesData} />
          <ChartSeriesItem data={seriesData}>
            <ChartSeriesItemTooltip background="green" />
          </ChartSeriesItem>
        </ChartSeries>
    </Chart>
);

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Customizing Content

By default, the content of the tooltip is determined based on the point type. To customize the tooltip content, either:

  • Use the format prop, or
  • Specify a template through the render prop.

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')
);