Interactive Plot Restyler

Build a tiny utility module that sets up a multi-trace scatter plot and exposes functions to mutate trace styling and layout incrementally, without rebuilding the figure.

Capabilities

Initialize base plot

• Given a container and two series of numeric x/y pairs, renders a scatter plot with distinct legend entries for each series. @test

Trace styling updates

• After initialization, changing marker color and line width for a specific trace updates only that trace while preserving the other traces and layout. @test
• Toggling visibility for a trace hides or shows it without removing its data or altering other traces. @test

Layout updates

• Updating axis ranges and plot title adjusts the layout while retaining existing data and legend state. @test
• Adding a single annotation at specified coordinates displays it on the plot without recalculating data. @test

Implementation

@generates

API

type XYSeries = { x: number[]; y: number[]; name?: string };

export async function initPlot(container: HTMLElement | string, series: XYSeries[]): Promise<void>;
export async function updateTraceStyle(options: { traceIndex: number; color?: string; width?: number; visible?: boolean }): Promise<void>;
export async function updateLayout(options: { title?: string; xRange?: [number, number]; yRange?: [number, number]; annotation?: { text: string; x: number; y: number } }): Promise<void>;

Dependencies { .dependencies }

plotly.js { .dependency }

Provides in-place data and layout restyling for interactive plots.