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>

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.