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

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

Tooltip disabled for some data

const data = [
  /* No tooltip will be shown for first two values */
  { value: 10, disableTooltip: true },
  { value: 20, disableTooltip: '20' },
  { value: 30, disableTooltip: false },
  { value: 40  },
];
<Chart data={data} >
    <Bar>
        <ChartTooltip>
            {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.