Charts·component·@astryxdesign/chartsExperimental

Chart Tooltip

ChartTooltip shows grouped values for the chart position nearest the pointer. Use Chart’s tooltip prop or its configuration object for the standard integration; direct composition remains available when you need explicit child composition.

@astryxdesign/charts

Authored source examples

Source examples recorded in the documentation for this entry.

Generated chart tooltip

import {Chart, bar, line} from '@astryxdesign/charts';

<Chart
  data={monthlyRevenue}
  xKey="month"
  series={[
    bar('revenue', {label: 'Revenue'}),
    line('forecast', {label: 'Forecast'}),
  ]}
  tooltip
/>;

Direct composition

import {Chart, ChartTooltip, line} from '@astryxdesign/charts';

const series = [line('revenue', {label: 'Revenue'})];

<Chart data={monthlyRevenue} xKey="month" series={series}>
  <ChartTooltip
    series={series}
    placement="top"
    showHoverDots={false}
  />
</Chart>;

Usage

Treat tooltip content as supplemental pointer detail. Give the parent Chart an accessible name and preserve its equivalent data table or another complete data view.
When composing ChartTooltip directly, pass the same series definitions used by Chart so rows, swatches, and hover dots stay aligned with the plotted marks.
Put information required to understand the chart only in the tooltip. The current interaction is pointer-driven and does not establish a focus trigger or aria-describedby relationship.
Render interactive controls inside the custom tooltip body. The surface is presentational and does not accept pointer input.

Typed props

Prop	Type and behavior
`series`	`readonly SeriesDef[]` · default [] Series definitions used to derive tooltip rows and hover dots. Chart supplies this automatically through its tooltip prop; direct composition should pass the same array used by Chart.
`render`	`(xValue: unknown, seriesValues: TooltipSeriesValue[]) => ReactNode` · default Default grouped value content Replaces the default card body. Return null to hide the card while preserving enabled hover indicators and dots.
`hoverIndicator`	`boolean` · default true Shows a band highlight for bar series on a band scale, or a vertical crosshair for other series.
`showHoverDots`	`boolean` · default true Shows a point marker for each eligible non-bar series at the hovered index.
`placement`	`'auto' \| 'right' \| 'left' \| 'top'` · default 'auto' Selects one of the shipped placement algorithms. The current implementation positions from the hovered x coordinate and the plot top; whether placement should instead be point-relative on both axes remains unresolved. Custom renderers own their content sizing.

Anatomy

Layer host · required

Layer host mounted under the chart’s nearest HTML container so nested Theme and MediaTheme scopes remain inherited. It uses the browser top layer when the Popover API is available and otherwise keeps the card visible through Layer’s reduced fallback.

Tooltip card · required

Non-interactive surface containing the current x value and series values.

Series row · optional

For multi-series charts, a decorative swatch, visible label, and value.

Hover indicator · optional

Band highlight for bar series on a band scale, or a vertical crosshair otherwise.

Hover dot · optional

Point marker for each eligible non-bar series at the hovered data index.

Accessibility

Supplemental detail

Content · 1.1.1 Non-text Content · Required on the parent Chart

The tooltip supplements the parent Chart. It does not replace the Chart accessible name, hidden data table, summary, or another equivalent data view.

States: All

Tooltip semantics

Semantics · 1.3.1 Info and Relationships · Built in with a documented limitation

The visible card uses role tooltip. Chart does not currently expose a focusable data-point trigger or an aria-describedby relationship, so required information must remain available outside this pointer-only surface.

States: Hovered