DumbbellChart

Flat array of row objects keyed by field name.

Container height in pixels. Width is always responsive.

Enable legend. Default: false.

Item selection. true = single selection keyed by the default key.

Enable zoom & pan. Default: false.

Accessibility configuration — ARIA label/description, screen-reader data table, live-region announcements. Merged with ChartDefaults.

The entrance animation. No update: the series redraws on new data without a transition (LAB-AT10).

Point annotations: a label with an optional connector and marker at a data coordinate, xValue on the x axis and yValue on the value axis. The contract of <Chart>'s options.annotations (BC1).

Optional className applied to the outer container.

Categorical palette for this chart only: replaces the host palette (--chart-1 … --chart-10) in the chart's colour assignment, and nothing else. It is a data encoding, not a theme: surfaces, text, grid and semantic roles keep coming from the CSS token contract, and a series, datum or annotation that sets its own colour keeps it. Any CSS colour string (a public token reference such as var(--chart-3), hex, oklch).

Connector stroke color. Default: the muted foreground at 0.8; a colour given here is drawn at full strength.

Connector stroke width in pixels. Default: 2.

The context menu. Opened on a mark, the host's builder receives a typed CartesianPoint as context.target.element (the point the tooltip names, or the focused point); on empty plot area the target is the chart, on a legend entry the entry. Its own groups are copy, zoom, series and export; a Cartesian chart has no replay.

Enable crosshairs. Default: false.

Cross lines (reference lines/bands).

The initial selection of an uncontrolled chart.

The chart's UI direction: the reading direction of its HTML text and chrome (tooltip, legend, menus, the accessible table), and the direction the context menu carries under <body>.

Left out, the chart inherits the direction of the page around it (the nearest dir attribute, else the computed CSS direction) and follows a later change of that attribute. It is never inferred from locale, and it never reverses an axis or reorders data: reversed stays an explicit axis choice. Under rtl the chrome mirrors (legend flow, tooltip side, context menu and submenus, report text in exports), a title-like label starts at the inline start, and a label placed by geometry (an axis tick, a slice or bar label) keeps its physical side; plot arrow keys stay spatial while legend and menu arrows follow the reading direction.

Marker fill for the high endpoint. Default: getSeriesColor(1).

Every event callback in one prop, selection events included.

Display name for the high endpoint. Falls back to yHighKey.

Horizontal layout (categories on Y-axis). Default: false.

Labels at the two ends (BC-LB1, the <Chart> dumbbell series label): each value beyond its own marker, away from the other, so a reversed axis never swaps them; endpoints picks 'low', 'high' or 'both' (default). The formatter's context names the end (role). Off by default; enabled: true shows them.

Connects the chart's legend to useChartLegend(), for a legend the host renders itself. Give one link to one chart.

Presentation input for axis labels, tooltips, labels and accessibility announcements: a locale code (notation follows the language), or a presentation-context object ({languageLocale, dateShape?, dateFormat?, timeFormat?, numberFormat?, currencyDisplay?}) carrying language and notation independently. dateShape is the normal human date shape a plain date consumer inherits; an axis that declares its own preset for readability keeps it. Forwarded untouched to the central @workspace/active-format; the package never resolves tenant or application settings itself. When omitted, <ChartDefaults> supplies it; with neither, the chart throws a configuration error (no 'en' fallback, active-format D14). Object inputs must be referentially stable across renders.

Display name for the low endpoint. Surfaces in the tooltip, sr-only data table header, and screen-reader announcement ({lowName}: {x}, {value}). Falls back to yLowKey.

The shape of both endpoint markers. Default: a circle; the two ends are told apart by colour and position.

Endpoint marker radius in pixels. Default: 6.

Series-level legend label. Falls back to ${lowName}–${highName}.

Each end's own marker fill, by a rule over its row (BC-P1, T1): the <Chart> dumbbell series paint, called once per end with role 'low' or 'high'. Paint only; the connector and the legend keep the series colours. See DumbbellSeriesOptions.paint.

Imperative handle — see ChartHandle. Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

The selection, controlled by the host. The chart draws, announces and lists the items it resolves to and never changes it; the host updates it from onSelectionChange. A request the host applies is announced when the host passes it back; one it ignores is never announced. A reference to an item that is hidden, zoomed or drilled out of view, or not in the data stays in the host's selection and is not shown as selected.

Several series: side by side in their category in this order, one legend entry each; hiding one closes its gap (T4).

Marker fill for the low endpoint. Default: getSeriesColor(0) from the active palette. Note: Dumbbell consumes two palette slots (low + high) per series, so on an 8-color palette a future multi-series dumbbell could exhaust the palette; consumers can override with explicit startFill / endFill to avoid that.

Synchronize with other charts in a SyncGroup. Default: false.

The host translator for every text the chart shows or announces. When omitted, <ChartDefaults> supplies it; with neither, the chart throws a configuration error (no English fallback, ADR-028).

Tooltip configuration. true = defaults, false = disabled, object = explicit.

Optional fixed width in pixels. Default: fill container.

Y-axis configuration.

Key for the higher y-value (e.g. q1_2025).

Key for the lower y-value (e.g. q1_2024).

Fired once for every legend change the chart applies: a hide, a show, an isolation or a show-all, from the built-in legend (click, key, double click, double tap), its menu, or useChartLegend(). The change names the entry and its target by identity and lists every hidden target after it. A refused action (the last visible target, legend.interactive: false) changes nothing and reports nothing.

Fired when the reader changes the selection (pointer, touch or keyboard), and when an uncontrolled selection drops items the data no longer contains. selection is the complete selection the change makes; it keeps every reference the selection held, of whatever form. On a controlled chart it is a proposal (change.requested: true), computed from the current selectedItems and never from an earlier proposal; the host applies it, changes it or ignores it.

Fired when the zoom range changes (after animation completes). Fractions [0..1]. Y params are only provided when Y-zoom is active. Cartesian charts only.

Fired when a chart animation completes.

• 'load': initial mount animation finished (or immediately if animation disabled / prefers-reduced-motion is active).
• 'update': data-update transition finished.

Not triggered by zoom animations (use onZoomChange) or tooltip fades.

Fired after a successful export action (PNG/SVG/CSV/PDF), including from the context menu and from imperative ChartHandle calls.

Fired when an export could not produce its file (W11), from the handle as well as from the context menu. Without it a failed context-menu export is reported as an error diagnostic (<ChartDefaults diagnostics>).

Fired when the reader activates an item: a click or tap on it, or Enter on the focused item (Shift+Enter on a sankey, whose Enter moves between nodes and links). With a handler, Enter activates instead of opening the context menu (Shift+F10 and the context-menu key still open it).

Fired exactly once per chart instance, after the first successful mount with valid dimensions and before any entrance animation starts. "Ready" means: the SVG is in the DOM, layout has run with real dimensions, and the chart can be queried by integration tests.

Distinct from onAnimationComplete with type: 'load', which fires *after* the load animation finishes. A chart with animation={false} still fires onReady — animation state has no effect on readiness.

A new React key on the host produces a new component instance and onReady fires again. Identity changes of the callback itself after the first fire are ignored (latch is per-instance).

Consumer requirement — stable from first render. The latch closes on the first effect run regardless of whether onReady was defined at that moment. If onReady is initially undefined and later resolves to a function, the callback will never fire — the latch has already closed with a no-op. Pass a stable reference (typically via useCallback) or pass the final function unconditionally from the first render.