PlotExplorer

Transparent overlay that owns pointer and keyboard exploration of a plot: a focusable role="slider" (arrows move, Home/End jump, Escape clears), the same contract as the cartesian charts.

Import

import { PlotExplorer } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/core.

Usage

export const Default: Story = {
  render: (args) => <ExplorerDemo count={args.count} label={args.label} />,
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
count *	number		Number of explorable items (boxes, bins, points), in reading order.
active *	number | null
onActiveChange *	(index: number | null) => void
pick *	(x: number, y: number) => number | null		Item under a plot-relative pixel, or null.
label *	string		Accessible name, e.g. labels.explore.
valueText *	string		What a screen reader announces for the active item.
margin *	PlotMargin
width *	number
height *	number
className	string

* marks a required prop.

Storybook stories

• Default
• Empty

Source

packages/ui/src/charts/core/distribution/explorer.tsx