Programmatic Hover and Shape Controller

Build a lightweight controller that renders a scatter chart and exposes programmatic hooks for moving the hover tooltip and cancelling an in-progress drawn shape without relying on user gestures.

Capabilities

Renders interactive scatter plot

• Creating the controller on a container with a list of (x, y) pairs draws a single-trace scatter plot with hover enabled and shape drawing available for rectangles or freeform paths. @test

Programmatically focuses a point

• Calling the focus routine with a trace index and point index shows the hover label for that point and replaces any previously focused point. @test

Clears hover state

• Invoking the clear routine hides any active hover label, even if a focus call just occurred. @test

Cancels an active shape draw

• While a shape is mid-draw, invoking the cancel routine aborts the draw without deleting shapes that are already committed to the layout. @test

Implementation

@generates

API

export type Point = { x: number; y: number };

export interface HoverShapeController {
  initialize(container: HTMLElement, points: Point[], title?: string): Promise<void>;
  focusPoint(traceIndex: number, pointIndex: number): Promise<void>;
  clearFocus(): void;
  cancelShapeDraw(): void;
}

export function createHoverShapeController(): HoverShapeController;

Dependencies { .dependencies }

plotly.js { .dependency }

Interactive charting library used for rendering and programmatic hover and shape control. @satisfied-by