[ @sdxc/ui/mixins ]
chartTooltip
Bridges a Chart.Bar, Chart.Line, Chart.Area, or Chart.Pie root to its sibling Chart.Tooltip surface.
import { chartTooltip } from "@sdxc/ui/mixins";Usage
Adds pointer- and focus-tracked tooltip coordination to a Chart.Bar, Chart.Line, Chart.Area, or Chart.Pie root, resolving the active point and its group into the sibling Chart.Tooltip's rows, position, and events.
Signature
chartTooltip(): MixinDescriptor<HTMLElement>Returns a mixin descriptor for a chart root's mix prop.
Examples
<div mix={[css({ position: "relative" })]}>
<Chart.Bar data={points} mix={chartTooltip()} />
<Chart.Tooltip>
<Chart.Tooltip.Row>
<Chart.Tooltip.Label />
<Chart.Tooltip.Value />
</Chart.Tooltip.Row>
</Chart.Tooltip>
</div>Used with it
The events, constants and types its module publishes, each imported from @sdxc/ui/mixins too.
ChartTooltipChangeEvent
Dispatched on a chart root by chartTooltip every time the active point set changes, carrying every active point's label and value so a consumer can drive a live-region announcement or cross-highlight a legend.
new ChartTooltipChangeEvent(points: readonly ChartTooltipPoint[])| Property | Type | Description |
|---|---|---|
points | readonly readonly ChartTooltipPoint[] | Every currently active point's label and value, in document order, or an empty array when nothing is active. |
CHART_POINT_ATTRIBUTE
Attribute every plottable point a chart root renders carries: a bar's
<rect>, a line or area's vertex marker, or a pie's wedge <path>.
chartTooltip() reads it to build its pointer-tracked candidate set.
const CHART_POINT_ATTRIBUTE = "data-chart-point"CHART_POINT_LABEL_ATTRIBUTE
Attribute a point carries its already-localized label on — the category,
series name, or slice name a chart renders it under. chartTooltip()
copies it unchanged into the matching row's CHART_TOOLTIP_LABEL_ATTRIBUTE.
const CHART_POINT_LABEL_ATTRIBUTE = "data-chart-label"CHART_POINT_VALUE_ATTRIBUTE
Attribute a point carries its already-formatted value on, rendered through
the consumer's own Intl formatting. chartTooltip() copies it unchanged
into the matching row's CHART_TOOLTIP_VALUE_ATTRIBUTE slot.
const CHART_POINT_VALUE_ATTRIBUTE = "data-chart-value"CHART_POINT_GROUP_ATTRIBUTE
Attribute an ancestor of a cluster of related points carries — every series' point for one category in a grouped bar chart. Every point beneath the nearest such ancestor populates the tooltip together, one row each.
const CHART_POINT_GROUP_ATTRIBUTE = "data-chart-group"CHART_TOOLTIP_ATTRIBUTE
Attribute Chart.Tooltip's own root element carries. chartTooltip() finds
it among its host's parent element's descendants — the sibling
relationship a chart root and its Chart.Tooltip render in.
const CHART_TOOLTIP_ATTRIBUTE = "data-chart-tooltip"CHART_TOOLTIP_ROW_ATTRIBUTE
Attribute every pre-rendered row inside Chart.Tooltip carries, one per
series it could ever need to show, in document order. chartTooltip()
fills as many as the active point set holds and hides the rest.
const CHART_TOOLTIP_ROW_ATTRIBUTE = "data-chart-tooltip-row"CHART_TOOLTIP_LABEL_ATTRIBUTE
Attribute the element inside a Chart.Tooltip row that receives the active point's CHART_POINT_LABEL_ATTRIBUTE text carries.
const CHART_TOOLTIP_LABEL_ATTRIBUTE = "data-chart-tooltip-label"CHART_TOOLTIP_VALUE_ATTRIBUTE
Attribute the element inside a Chart.Tooltip row that receives the active point's CHART_POINT_VALUE_ATTRIBUTE text carries.
const CHART_TOOLTIP_VALUE_ATTRIBUTE = "data-chart-tooltip-value"CHART_TOOLTIP_X_PROPERTY
CSS custom property chartTooltip() writes on Chart.Tooltip's host with
the active point's horizontal pixel offset, relative to the chart root's
own parent element, for its own styling to read back via var().
const CHART_TOOLTIP_X_PROPERTY = "--ui-chart-tooltip-x"CHART_TOOLTIP_Y_PROPERTY
CSS custom property chartTooltip() writes on Chart.Tooltip's host with
the active point's vertical pixel offset, relative to the chart root's own
parent element, read back the same way as CHART_TOOLTIP_X_PROPERTY.
const CHART_TOOLTIP_Y_PROPERTY = "--ui-chart-tooltip-y"ChartTooltipPoint
One point's already-localized label and value text, read off CHART_POINT_LABEL_ATTRIBUTE and CHART_POINT_VALUE_ATTRIBUTE, as carried by ChartTooltipChangeEvent.
| Member | Type | Description |
|---|---|---|
label | readonly string | The point's label, copied from CHART_POINT_LABEL_ATTRIBUTE unchanged. |
value | readonly string | The point's value, copied from CHART_POINT_VALUE_ATTRIBUTE unchanged. |