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 accept a rendering function in the following form:

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

API Docs

CustomTooltip type

The react component used to render a custom tooltip

Signature:

export declare type CustomTooltip<D extends BaseDatum = Datum, SI extends SeriesIdentifier = SeriesIdentifier> = ComponentType<CustomTooltipProps<D, SI>>;

References: BaseDatum, Datum, SeriesIdentifier, CustomTooltipProps

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;
}