Interactive Load Chart

Render an interactive, dual-series time-series visualization that stays readable as users explore, zoom, and export the view.

Capabilities

Renders paired time-series lines

• Given a container element and readings with timestamp, actual, and optional forecast, draws two distinct lines that share a time axis, label axes, surface an options.title heading when provided, and annotate the latest point for each series. @test
• When initialRangeHours is provided, the chart opens zoomed to the most recent window of that duration (based on ascending timestamps) while retaining full-history data for manual zooming back out. @test

Hover insights

• Hovering any point shows a tooltip that includes the ISO timestamp, the point's value with a kW suffix, and—when both series exist for the same timestamp—the difference between actual and forecast rounded to one decimal place. @test

Controls and export

• The chart includes built-in UI controls to reset zoom/pan and to download a PNG snapshot with a transparent background at 2x scale. @test

Implementation

@generates

API

export type Reading = {
  timestamp: string; // ISO 8601
  actual: number;
  forecast?: number;
};

export type ChartOptions = {
  initialRangeHours?: number;
  title?: string;
};

export async function renderInteractiveChart(
  container: HTMLElement,
  readings: Reading[],
  options?: ChartOptions
): Promise<void>;

Dependencies { .dependencies }

plotly.js { .dependency }

Provides interactive plotting primitives for rendering, updating, and exporting the chart.