Interaction
Charts respond to hover, click, and legend interaction out of the box, and report everything through optional callback props. Every interaction on this page also works from the keyboard — see Accessibility.
Hover a legend entry to focus its series, click the plot to pin the tooltip and crosshair, and click legend entries to filter series in and out — filtering plays the staged series transition:
Focus
Hovering or clicking a series (per its focusOnMouseOver / focusOnClick config) focuses it: the focused series is styled from the focused state of its styles and every other series from their defocused state, animated over focusDuration. By default those states change only opacity and width — their colors are 'same', meaning "keep the normal state's color". The legend can drive the same focus via legend.focusOnMouseOver.
Category focus has knobs of its own: the series' focusCategoryOnMouseOver and focusCategoryOnClick focus the category the pointer is on, and a series with useAxisFocus shows as focused whenever the value axis it belongs to is.
Legend filtering
With legend.filterOnClick enabled, clicking a legend item toggles its series out of (and back into) the chart. The item stays in the legend so the series can be restored, and the removal/return animates as a series transition. Its color icon goes hollow to mark it filtered; set legend.showFilteringOnLabels to strike through the item text as well, and tooltip.showFilteringOnLabels to do the same to the series' tooltip label. Both default to false. Set filterable: false on a series to exempt it from legend (and tooltip) filtering entirely, and showColorInLegend: false to drop the color icon from its legend item.
Tooltip and crosshair
tooltip and crosshair style the tooltip and crosshair shown for the focused category. Per-series formatting of tooltip values — label, prefix/suffix, d3-format string — lives on the series (valueLabel, valueFormat, and friends).
The tooltip can drive focus too: tooltip.focusCategoryOnMouseOver and tooltip.focusCategoryOnClick focus the category value the pointer is on inside the tooltip. Each series can also drop its color icon from the tooltip rows with showColorInTooltip: false.
Tooltip controls
tooltip.showControls adds a control strip above the tooltip's lines: ‹ and › buttons step the shown category, and a mode button toggles what clicking a tooltip row does. In filter mode (the initial mode) clicking a series row toggles its series out of the chart, exactly like a legend click — respecting filterable — and hovering a row focuses its series the way hovering its legend item does; in focus mode clicking a row pins focus on its series — or, on the category line, on the category. The mode button shows the active mode via tooltip.filterModeText / tooltip.focusModeText ('Filter' / 'Focus' by default), and the step buttons take their accessible labels from accessibility.tooltipPreviousLabel and accessibility.tooltipNextLabel. The buttons and rows all work from the keyboard — see the keyboard map.
Callbacks
All callbacks are optional props on either entry point:
createDefaultChart(container, {
config, data, width, height,
onFocus: ({ focusedSeriesId, focusedCategoryIndex }) => { /* focus changed */ },
onSeriesFilter: ({ filteredSeriesIds }) => { /* legend filtering changed */ },
onChartClick: ({ categoryIndex, chartX, chartY }) => { /* plot area clicked */ },
onSliceClick: ({ seriesId }) => { /* pie slice clicked */ },
onSeriesClick: ({ seriesId, categoryIndex }) => { /* bar/point/line clicked */ },
onTitleClick: () => {}
});onFocus(focus)— the focused series/category/axis changed (mouse over/out or click, per the series'focusOnMouseOver/focusOnClickconfig)onSeriesFilter(filter)— a legend click toggled a series in or out of the filtered setonChartClick/onChartMouseEnter/onChartMouseMove/onChartMouseLeave— plot-area pointer events with chart coordinates and the nearest category indexonSliceClick(payload)— a slice of a pie or donut chart was clickedonSeriesClick(payload)— a cartesian series shape (bar, marker, label, or line/area path) was clicked; reports the series id, the shape's category index (-1for a whole-series path), and the category index nearest the pointer. Fires whether or not the series'focusOnClickconfig is set, and only on click — the cartesian counterpart ofonSliceClickonTitleClick()— the chart title was clicked (seetitle.linkandlinkDisabled)onSeriesLayoutBoundsChange(bounds)— the plot area was re-laid-out
The four pointer callbacks share one payload (ChartEventPayload: pointer coordinates in three frames, plus the nearest category index). onFocus and onSeriesFilter each receive the whole state rather than only what changed. Every callback and every payload field is listed in Callbacks and payloads.
Making a shape clickable doesn't change the mouse cursor. Set showPointer on a series (or seriesDefaults, as the example below does) to give its shapes — including pie slices — cursor: pointer, advertising that clicking does something.
Watch them fire — click a bar, hover a series, or toggle a legend entry; the log records each event in order and follows the latest (scroll up for older ones). One interaction often fires several: with focusOnClick set, clicking a bar reports onFocus and onSeriesClick together.
Pie charts report slice clicks through onSliceClick instead:
Controlled focus and filtering
Focus and legend filtering are managed by the chart internally, but each piece of that state has a matching input prop that takes over when it is set (not undefined), overriding the internal state on every update. Pass back what the callbacks report to keep several charts in sync:
focusedCategoryIndex(-1= none),focusedSeriesIdandfocusedValueAxisId(null= none) — the controlled form ofonFocusfilteredSeriesIds— the controlled form ofonSeriesFilter
chart.update({
focusedCategoryIndex: focus.focusedCategoryIndex,
focusedSeriesId: focus.focusedSeriesId
});Leave a prop undefined to let the chart keep managing that piece itself.