Tooltips

Inspect semantic point values and customize tooltip content. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

Try it live

Hover or keyboard-focus a chart mark. The footer in this example comes from a custom tooltip formatter. The native renderer owns positioning and accessibility; the formatter receives semantic context and default content.

Tooltips can return structured rows, plain text, an element, or null. Keep custom content readable and avoid treating untrusted labels as HTML.

Loading chart…

Inspect live chart state

The chart uses the native Charts renderer. Buttons outside the plot are example application controls calling the public API.

Complete chart setup with sample data

Install Charts using the installation guide, then run this setup after the host mounts. The data is illustrative. Additional actions for this tool are explained below.

<div id="chart" style="width:100%;height:500px"></div>

import { createChartFactory, createNativeChartsRenderer } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
import { groupedColumnChart } from '@revolist/charts/grouped-column';
import { columnLineChart } from '@revolist/charts/column-line';

const rows = [
  {
    "date": 1767225600000,
    "month": "Jan",
    "revenue": 65,
    "costs": 45
  },
  {
    "date": 1769904000000,
    "month": "Feb",
    "revenue": 82,
    "costs": 50
  },
  {
    "date": 1772323200000,
    "month": "Mar",
    "revenue": 76,
    "costs": 48
  },
  {
    "date": 1775001600000,
    "month": "Apr",
    "revenue": 95,
    "costs": 65
  },
  {
    "date": 1777593600000,
    "month": "May",
    "revenue": 110,
    "costs": 72
  },
  {
    "date": 1780272000000,
    "month": "Jun",
    "revenue": 102,
    "costs": 68
  },
  {
    "date": 1782864000000,
    "month": "Jul",
    "revenue": 121,
    "costs": 80
  },
  {
    "date": 1785542400000,
    "month": "Aug",
    "revenue": 115,
    "costs": 76
  },
  {
    "date": 1788220800000,
    "month": "Sep",
    "revenue": 135,
    "costs": 89
  },
  {
    "date": 1790812800000,
    "month": "Oct",
    "revenue": 128,
    "costs": 85
  },
  {
    "date": 1793491200000,
    "month": "Nov",
    "revenue": 145,
    "costs": 92
  },
  {
    "date": 1796083200000,
    "month": "Dec",
    "revenue": 155,
    "costs": 100
  }
];
const mapping = {
  "category": {
    "field": "date",
    "label": "month"
  },
  "series": [
    {
      "field": "revenue",
      "label": "Revenue"
    },
    {
      "field": "costs",
      "label": "Costs"
    }
  ]
};
const createChart = createChartFactory([lineChart, groupedColumnChart, columnLineChart]);
const container = document.getElementById('chart')!;
const chart = await createChart({
  container,
  data: rows,
  mapping,
  renderer: createNativeChartsRenderer([lineChart, groupedColumnChart, columnLineChart], {
    tooltip: {
      showDelayMs: 0,
      formatter: (_context, content) => ({
        ...content, footer: 'Illustrative data · € thousands',
      }),
    },
  }),
  "chartType": "line",
  "axes": {
    "x": {
      "scale": "time"
    }
  },
  "presentation": {
    "title": "Monthly performance",
    "subtitle": "Illustrative data · 2026",
    "legendPosition": "bottom"
  },
  "interaction": {
    "mode": "select",
    "selectionMode": "multiple"
  }
});

// When the host unmounts:
// chart.destroy();

API and configuration

import { createNativeChartsRenderer } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
const renderer = createNativeChartsRenderer([lineChart], {
  tooltip: {
    showDelayMs: 0, hideDelayMs: 100, followPointer: true,
    formatter: (_context, content) => ({
      ...content, footer: 'Illustrative data · € thousands',
    }),
  },
});
// Pass renderer when creating a chart registered with lineChart.
// tooltip: false disables the native tooltip.

Support and behavior

Datum content follows each type’s semantic bindings. Shared mode is a navigation capability rather than a universal tooltip layout. Formatter functions are runtime configuration; reattach them after restoring a serialized model.

State and cleanup

Authored settings are available through chart.model. Updates replace whole settings objects: spread fields you want to retain, and await the returned promise before reading state or exporting. Destroy the controller when its host unmounts.

All chart tools · Chart types · Data & Configuration

Tooltip options and formatter results

rendererOptions.tooltip field	Default and behavior
false	Disable the tooltip surface; crosshair/peer-hover inspection can remain active independently.
showDelayMs	120 ms before pointer opening; keyboard inspection opens immediately. Finite negative delays clamp to zero; nonfinite values use the default.
hideDelayMs	80 ms pointer closing delay, with existing focus/pointer transfer allowances.
followPointer	true; false stops pointer-follow repositioning while the same target remains active.
className	Additional classes on the HTML tooltip root, separate from SVG className.
formatter(context, defaultContent)	Optional synchronous formatter. Return defaultContent (or a copy) to preserve defaults.

context contains chartId, chartType, canonical category, series, raw value, displayValue, color and drillable. Relationship points add channelValues, channelSeries and channelDisplayValues for X/Y/size. Shared modes add sharedItems and omittedSharedItemCount; complete histogram inspection adds aggregate/histogramItems with bin metrics and genuine representative provenance. These contexts do not grant raw-record access or turn aggregate bins into clickable source rows.

Return plain text, an HTMLElement, or { title?, rows?, footer?, ariaLabel? }. Each row accepts { label, value, color? }. null, undefined or an empty string suppresses tooltip content; undefined does not mean retain the default. Invalid result shapes report invalid-tooltip-result and use the default content. Strings are rendered as text. An application-created element is application-owned content: avoid unsafe HTML and retain readable, noninteractive inspection semantics.

Tooltips are transient HTML, absent from model snapshots and image exports. Reattach the formatter after restore. Resize, repaint and destroy release pending timers/listeners with the inspection surface; preview mode has no interactive tooltip. The formatter may run repeatedly as inspection changes, so keep it synchronous and free of chart updates or retained source mutations.