BundyUI

Charts

ChartTooltip

The panel that follows the pointer across a plot, carrying a title and a list of swatch/label/value rows. Same chrome as `Tooltip`, but positioned from plot coordinates rather than anchored to an element.

html
<UiChartTooltip :x="..." :y="..." :width="..." />

Needs the charts module

This component ships in @jgastager/bundy-ui/charts, a separate module so projects that never draw a chart don't carry the paint classes these need. Nothing extra to install — just add the module entry. See Charts.

X

required

x is the pointer's horizontal position inside the chart, in pixels. The panel is placed from plot coordinates rather than anchored to an element because there is no element — a mark under the pointer is a path segment, not a DOM node the way Tooltip expects one. Read it off the frame's pointermove payload, which is already in scene coordinates.

Positioned from plot coordinates rather than anchored to an element, because there is no element — a mark under the pointer is a path segment, not a DOM node the way Tooltip expects one.

Y

required

y is the pointer's vertical position inside the chart, in pixels. The panel sits above the pointer and clamps to the plot when there isn't room, so a mark near the top of the chart still gets a readable tooltip rather than one hanging off the frame.

Width

required

width is the chart's own width, which the panel needs in order to flip to the other side of the pointer before it runs off the right edge. The frame's tooltip slot hands it to you — pass that through rather than measuring the container again, since a second measurement can disagree by a frame.

It flips to the other side of the pointer near the right edge and clamps vertically, using the width the frame's tooltip slot hands you. Pass that through rather than measuring the container again.

Title

title is the heading above the rows — normally whichever category the pointer has landed on, so the reader can tell which bar or point the numbers belong to. Leave it off and the panel is rows alone, which only works when the position is obvious from the pointer itself.

Rows

rows is one entry per series at the focused position, each a swatchClass, a label and a value. It takes the swatch *class* rather than a colour name — chartSwatchClass(color) produces it — which keeps the tooltip agnostic about where a chart's paint came from. Several rows is how a grouped tooltip lists every series at once.

rows take a swatchClass, not a color name — chartSwatchClass(color) produces it. Passing the class rather than the token keeps the tooltip agnostic about where a chart's paint came from.

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
xrequired
number
—
Pointer x within the chart, in pixels.
yrequired
number
—
Pointer y within the chart, in pixels.
widthrequired
number
—
Chart width, so the panel can flip before it runs off the right edge.
title
string
—
Heading above the rows — usually the focused category.
rows
ChartTooltipRow[]
—
One row per series at the focused position.

Slots

Slot
default

Types

ts
interface ChartTooltipRow {
    /** The series or category this row is for. */
    label: string;

    /** The formatted value. */
    value: string;

    /** UnoCSS class painting the swatch, from `chartSwatchClass()`. */
    swatchClass: string;
}