Triggers
ECharts tooltips have two trigger modes:
'item' — hover an individual data point — and 'axis' — hover
anywhere along the axis and see all series at that x. Pick by chart type:
item— pie, scatter, sankey, bubble — anything where each datum stands alone.-
axis— line, area, bar, stacked variants — anything indexed by a shared category axis.
trigger: 'axis'
trigger: 'item' with a custom formatter
Cross-shared (axisPointer)
When several charts share an x-axis, an axis-pointer tooltip can be linked across them — moving the cursor on chart A
highlights the same x on chart B. ECharts calls this
axisPointer.link — see the
ECharts handbook
for the full pattern.
Crosshair pointer
axisPointer: { type: 'cross' } draws both a vertical and a horizontal guide line to the axes,
with the value read-out on each axis — useful when the exact y matters as much as the series.
HTML tooltip content
A function formatter can return an HTML string — use it to lay out multi-series rows,
bold the totals, or add units. Build it with string concatenation (JS template literals collide with Qute).
Permanent data labels
Sometimes you want the numbers on the chart, not behind a hover. Turn on
label: { show: true } per series and drop the tooltip
(tooltip: { show: false }) — every point is annotated up front.
Fixed tooltip position
By default the tooltip follows the cursor. Pin it to a corner with a fixed
tooltip: { position: [x, y] } so it never covers the data the user is pointing at.
Tooltips inside a clipped card
A chart in a card with overflow: hidden (or a scroll box) clips a tooltip that spills
past the edge. tooltip: { confine: true } keeps it inside the chart's own box; for
full freedom use appendTo: 'body' to render it at the document root. This chart sits
in a deliberately tight overflow: hidden box with confine
on — hover near the top edge and the tooltip stays visible.
Escaping in Qute templates
ECharts placeholder tokens — {b}, {c},
{d} — collide with Qute's expression syntax. Backslash-escape each one inside the
formatter string (as shown above) or wrap the whole formatter in a Qute ... block.
The
Pie chart example
uses the backslash form.