# 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 cartesi…

Source: https://ui.jcsoftdev.com/docs/components/plot-explorer

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

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

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

## Usage

```tsx
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](/storybook/?path=/story/charts-primitives-plotexplorer--default)
- [Empty](/storybook/?path=/story/charts-primitives-plotexplorer--empty)

## Source

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