API / Configuration / ChartTooltip

Defined in: src/core/types/chart/tooltip.ts:171

Type Parameters

Type Parameter Default type
T MeaningfulAny

Properties

``
Property Type Description
dateTimeLabelFormats? Partial<Record<"year" | "month" | "day" | "hour" | "minute" | "second" | "millisecond" | "week", string>> Per-granularity display formats for the default datetime tooltip header. Ignored when headerFormat is set. Each value is a format string in the same form as the format argument to DateTime#format in @gravity-ui/date-utils (see the FormatInput type there): Day.js–style tokens, e.g. YYYY, MM, DD, HH, mm, ss, SSS, MMM. Partial objects are merged with the built-in DATETIME_LABEL_FORMATS; omitted keys keep defaults. Examples dateTimeLabelFormats: { day: 'YYYY-MM-DD', hour: 'YYYY-MM-DD HH:mm', minute: 'YYYY-MM-DD HH:mm' } dateTimeLabelFormats: { day: 'MM/DD/YYYY', week: 'MM/DD/YYYY' } dateTimeLabelFormats: { hour: 'HH:mm', minute: 'HH:mm', second: 'HH:mm:ss' } dateTimeLabelFormats: { month: 'YYYY-MM', year: 'YYYY' } dateTimeLabelFormats: { month: 'MMMM YYYY' } See https://gravity-ui.github.io/date-utils/pages/api/DateTime/overview.html
enabled? boolean -
headerFormat? ValueFormat Formatting settings for tooltip header row.
pin? object -
pin.enabled? boolean -
pin.modifierKey? "altKey" | "metaKey" -
qa? string Can be used for the UI automated test. It is assigned as a data-qa attribute to an element.
renderer? (args: ChartTooltipRendererArgs<T>) => null | ReactElement Specifies the renderer for the tooltip. If returned null default tooltip renderer will be used.
rowRenderer? null | (args) => string | ReactElement Defines the way a single data/series is displayed (corresponding to a separate selected point/ruler/shape on the chart). It is useful in cases where you need to display additional information, but keep the general format of the tooltip. The returned React element must be a <tr> so that it fits into the table layout used by the tooltip. Apply the className arg to the root <tr> to get the correct active/striped styles. If a string is returned, it will be parsed as HTML and rendered as-is — the string must be a complete <tr>...</tr> element. Examples rowRenderer: ({id, name, value, className}) => ( <tr key={id} className={className}> <td>{name}</td> <td>{value}</td> </tr> ) rowRenderer: ({name, value, className}) =>
{value}
sorting? { direction: "asc" | "desc"; key: "value"; } | ChartTooltipSortComparator<T> Controls the order of tooltip rows. Applied to hovered before rendering. Use a custom comparator (a, b) => number for arbitrary ordering.
throttle? number Show tooltip at most once per every throttle milliseconds
totals? object Settings for totals block in tooltip
totals.aggregation? "sum" | (args) => ChartTooltipTotalsAggregationValue The aggregation method for calculating totals. It can be a built-in function (e.g., 'sum') or a custom function. Default 'sum'
totals.enabled? boolean Enables/disables the display of totals Default false
totals.label? string The label text for the totals. For built-in aggregations, the label can be omitted.
totals.valueFormat? ValueFormat Formatting settings for totals tooltip value.
valueFormat? ValueFormat Formatting settings for tooltip value.
Previous
ChartTitle
Next
ChartTooltipRendererArgs