ChartTooltip

The ChartTooltip component is used to setup hover tooltips for data on the chart. ChartTooltip must be used as a child of another component such as Bar, Area, Line or Trendline.

Tooltips should only use plain html without any interactive elements. It's not possible to click on any elements of a tooltip. If you need interactive elements like buttons, those should be added to the ChartPopover.

Examples

Basic

<Chart data={data}>
  <Bar>
    <ChartTooltip>{(datum) => <div>Average: {datum.average}</div>}</ChartTooltip>
  </Bar>
</Chart>

Tooltip disabled for some data

const data = [
  /* Tooltip will not be shown when disableTooltip is truthy */
  { value: 10, disableTooltip: true },
  { value: 20, disableTooltip: 'a string' },
  /* Tooltip will be shown when disableTooltip is falsy */
  { value: 30, disableTooltip: false },
  { value: 40 },
];

<Chart data={data}>
  <Bar>
    <ChartTooltip excludeDataKey="disableTooltip">{(datum) => <div>Value: {datum.value}</div>}</ChartTooltip>
  </Bar>
</Chart>;

Tooltip with dimension area targeting (Bar only)

<Chart data={data}>
  <Bar type="stacked">
    <ChartTooltip targets={['item']}>
      {(datum) => (
        <div>
          <div>Series: {datum.series}</div>
          <div>Value: {datum.value}</div>
        </div>
      )}
    </ChartTooltip>
    <ChartTooltip targets={['dimensionArea']}>
      {(datum) => (
        <div>
          <div>Dimension: {datum.dimension}</div>
          {datum.rscGroupData?.map((item, index) => (
            <div key={index}>
              {item.series}: {item.value}
            </div>
          ))}
        </div>
      )}
    </ChartTooltip>
  </Bar>
</Chart>

In this example, two separate tooltips are defined: one for hovering over the actual bar marks (item) that shows individual segment data, and another for hovering anywhere within the dimension area (dimensionArea) that shows aggregated data across the dimension. The datum shape differs between these targets, so they require separate tooltip implementations.

Tooltip on axis thumbnails (Bar only)

ChartTooltip can be used as a child of Axis to display tooltips when hovering over axis thumbnails. This requires AxisThumbnail to be present as a child of Axis, and only works with bar charts. When hovering a thumbnail, bars with matching dimension values are automatically highlighted. The highlightBy and targets props are ignored for axis tooltips.

const data = [
  {"browser": "Chrome", "downloads": 27000, "thumbnail": "/chrome.png"},
  {"browser": "Firefox", "downloads": 8000, "thumbnail": "/firefox.png"},
  {"browser": "Safari", "downloads": 7750, "thumbnail": "/safari.png"}
]

<Chart data={data}>
  <Bar dimension="browser" metric="downloads" />
  <Axis position="bottom" baseline>
    <AxisThumbnail urlKey="thumbnail" />
    <ChartTooltip>
      {(datum) => {
        const d = datum[GROUP_DATA]?.[0] ?? datum;
        return (
          <div>
            <div>Browser: {d.browser}</div>
            <div>Downloads: {d.downloads?.toLocaleString()}</div>
          </div>
        );
      }}
    </ChartTooltip>
  </Axis>
</Chart>

Props

name	type	default	description
children*	(datum: Datum) => ReactElement	–	Sets what is displayed by the tooltip. Supplies the datum for the value(s) that is currently hovered and expects a ReactElement to be returned.
excludeDataKey	string	–	When present, points in the chart data where the value for excludeDataKey is truthy will not be interactable and will not display a tooltip.
highlightBy	'item' | 'dimension' | 'series' | string[]	'item'	Specifies which marks on the parent should be highlighted on hover. For example if set to dimension, when a user hovers a mark, it will highlight all marks with the same dimension value. If an array of strings is provided, each of those key will be used to find other marks that match and should be highlighted. For example, if highlightBy is set to ['company', 'quarter'], when a mark is hovered, all marks with the same company and quarter values will be highlighted. If highlightBy uses series, dimension, or an array of string, the item passed to the tooltip callback will include the rscGroupData key. This will have the data for all highlighted marks so that your tooltip can provide info for all the highlighted marks, not just the hovered mark.
targets	('dimensionArea' | 'item')[]	['item']	Specifies which areas of the chart should trigger the tooltip. item will trigger the tooltip when hovering over the actual data mark. dimensionArea will trigger the tooltip when hovering anywhere within the dimension area (e.g., for bar charts, hovering anywhere along the dimension slice). Note: Currently only active for bar charts.