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.

vue

<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.

Options

One block per prop — what it does, and what it looks like set.

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.

Footer

footer is one more { label, value } set off below the rows by a hairline, and indented past a swatch it doesn't have so its label still lines up. It's for the figure the rows imply but don't state — the total of a stack, which is what a stacked chart is read for and the one number its segments can't be added up to by eye. Leave it off for a grouped chart, where the series share a baseline and a sum of them means nothing. BarChart fills this in for you from its totalLabel; you only pass it directly when building a chart by hand out of ChartFrame.

Offset

offset is the gap between x and the panel's near edge — 12 pixels by default, enough to clear a pointer. Widen it when the anchor has width of its own, so the panel clears that on whichever side it flips to; ChartMarker passes half its note's width plus a margin.

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.

footer

ChartTooltipFooter

—

A figure set off below the rows by a hairline — the total of a stack, which is the one number a stacked chart is read for and the one its segments can't be added up to by eye.

offset

number

12

Distance from `x` to the panel's near edge, in pixels. Widen it when the anchor is a thing with width rather than a pointer — a `ChartMarker`'s note — so the panel clears it on whichever side it flips to.

Slots

Slot

default

Types

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

interface ChartTooltipFooter {
    label: string;
    value: string;
}