Custom Tooltip

If the default behaviour is not enough for your use case, you can always define a custom tooltip reusing our set of composable components.

A custom tooltip can be specified through the <Tooltip> component within a chart configuration:

<Chart>
  <Tooltip customTooltip={yourCustomTooltip} />
  ...
</Chart>

The customTooltip prop accepts a React class component or a stateless functional component.

const yourCustomTooltip: CustomTooltip = ({ header, values }) => {
    return (
      <>
        <TooltipHeader header={header} />
        <TooltipTable columns={columns} items={values} />
      </>
    );
  };

Two main props are passed to the component (the same props used internally to render the tooltip):

• header: TooltipValue<D, SI> | null that provides the information used to render an header. Currently only used by cartesian chart to render the current X-Axis value see Tooltip/Cartesian charts
• values: TooltipValue<D, SI>[] an array of data points that correspond to current cursor position (with some variations)

Both these props are filled with object that follows this signature:

interface TooltipValue<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> {
  /* The label of the tooltip value */
  label: string;
  /* The value */
  value: any;
  /* The formatted value to display*/
  formattedValue: string;
  /* The mark value */
  markValue?: number | null;
  /* The mark value to display */
  formattedMarkValue?: string | null;
  /* The color of the graphic mark (by default the color of the series) */
  color: Color;
  /* True if the mouse is over the graphic mark connected to the tooltip */
  isHighlighted: boolean;
  /* True if the tooltip is visible, false otherwise */
  isVisible: boolean;
  /* The identifier of the related series */
  seriesIdentifier: SI;
  /* The accessor linked to the current tooltip value */
  valueAccessor?: Accessor<D>;
  /* The datum associated with the current tooltip value */
  datum?: D;
}

You can render your own component, as in this example but is preferable to maintain the current look-and-feel used by the default tooltip by reusing our set of Tooltip Components.

Tooltip Components

These are the components that can be reused to render a custom tooltip:

• TooltipHeader
• TooltipTable
  • TooltipTableHeader
  • TooltipTableBody
  • TooltipTableFooter
  • TooltipTableRow
    • TooltipTableCell
    • TooltipTableColorCell
• TooltipFooter
• TooltipDivider

Except for the TooltipHeader, TooltipFooter and the TooltipDivider all the other components are wrappers around the HTML table element and its children.

TooltipHeader

header: TooltipValue<D, SI> | null; formatter?: TooltipValueFormatter<D, SI>;

## API Docs


```ts
type CustomTooltip<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = ComponentType<
  CustomTooltipProps<D, SI>
>;

interface CustomTooltipProps<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier>
  extends TooltipInfo<D, SI> {
  headerFormatter?: TooltipValueFormatter<D, SI>;
  dir: 'ltr' | 'rtl';
  backgroundColor: string;
}

interface TooltipInfo<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> {
  header: TooltipValue<D, SI> | null;
  values: TooltipValue<D, SI>[];
}

interface TooltipValue<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> {
  /**
   * The label of the tooltip value
   */
  label: string;
  /**
   * The value
   */
  value: any;
  /**
   * The formatted value to display
   */
  formattedValue: string;
  /**
   * The mark value
   */
  markValue?: number | null;
  /**
   * The mark value to display
   */
  formattedMarkValue?: string | null;
  /**
   * The color of the graphic mark (by default the color of the series)
   */
  color: Color;
  /**
   * True if the mouse is over the graphic mark connected to the tooltip
   */
  isHighlighted: boolean;
  /**
   * True if the tooltip is visible, false otherwise
   */
  isVisible: boolean;
  /**
   * The identifier of the related series
   */
  seriesIdentifier: SI;
  /**
   * The accessor linked to the current tooltip value
   */
  valueAccessor?: Accessor<D>;

  /**
   * The datum associated with the current tooltip value
   * Maybe not available
   */
  datum?: D;
}