Charts
ChartMarker
A dashed rule across a cartesian plot at one value on either axis, ending in a note — a release date on a timeline, a target on a bar chart — with an optional tooltip on hover. Placed in a `LineChart`, `AreaChart`, `BarChart` or `ScatterChart`'s default slot, it reads that chart's scales, so it takes a data value rather than a pixel.
<UiChartMarker :value="..." />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.
Axis
axis is the axis the value sits on, as drawn. An x marker is a vertical rule at a position along the bottom — a launch, an incident, the moment something changed. A y marker is a horizontal one at a level — a target, a limit, an average. On a horizontal BarChart the values run along x, so a target there is an x marker.
- Desktop
- Mobile
x and y are the axes on screen, not the data's roles: on a horizontal BarChart a value threshold is axis="x" and a single category is axis="y".
Value
requiredvalue is where the line goes, in data terms rather than pixels: a category name on a category axis, a number on a numeric one. The chart's own scale places it, so it lands exactly where that row's marks do and moves with them when the chart resizes. A value the axis doesn't reach draws nothing — pinned to the edge, it would claim a reading that isn't there.
Goes in the default slot of LineChart, AreaChart, BarChart or ScatterChart — it reads the chart's scales from context, so outside one of those (or inside a hand-built ChartFrame, which has no scales to provide) it renders nothing. Pie, donut, radar, radial, gauge, heatmap and Venn charts have no default slot.
A category axis matches value against the category strings exactly, so "Mar" and not the formatted tick label. A value outside a numeric axis' domain draws nothing rather than being clamped; widen the axis with yMin/yMax (or xMin/xMax) if the marker must show.
Label
label is the note at the end of the line. It sits inside the plot, flush with the edge the line ends at, so a marker never needs room the chart didn't already reserve — and it slides inward near a corner rather than hanging off the chart. Leave it off for a plain rule that ends in a knob.
Color
color paints the line and the note together — a semantic family, a shade of one, or an arbitrary value, the same names a series takes. Lean on the meaning: error for a limit, success for a goal, the default neutral-300 for an event that's neither good nor bad.
Position
position picks which end of the line carries the note: end is the top of an x marker and the right of a y one, start the bottom and the left. Move it when the marks crowd the default corner.
Dashed
dashed draws the line in dashes, so it reads as an annotation laid over the data rather than as one more series. Turn it off for a hard boundary, like a limit nothing should cross.
Tooltip
tooltip is text shown in a panel when the note is hovered, under the label as its title — the reason behind the marker, which a two-word note can't carry. The panel is the same one a chart's crosshair uses, and the crosshair steps aside while it's open. For anything richer than text, the tooltip slot renders into the same panel.
- Desktop
- Mobile
Only the note (or the knob, with no label) opens the tooltip — the line itself belongs to the chart's crosshair. The marker sits inside the chart's role="img" SVG, so neither the label nor the tooltip reaches a screen reader: say what it marks in the chart's ariaDescription too.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
On a horizontal bar chart
The axes are the ones on screen, so a horizontal BarChart takes its value marker on x and its category marker on y — a quota line across every rep, and one rep singled out.
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"x" | "y"'x'valuerequiredstring | numberstringChartColorName'neutral-300'"start" | "end"'end'stringTypes
type ChartColorName = ChartColorFamily | `${ChartColorFamily}-${ChartColorShade}` | `[${string}]`;