Snapshot Export Utility

Build a utility that renders a supplied figure definition into a DOM container and exports a static image snapshot, optionally triggering a client-side download.

Capabilities

Export static image

• Exporting a scatter-style figure to PNG with custom width, height, and scale returns a data URL string starting with data:image/png and reports the requested filename/format in the resolved value. @test

Download optional

• When the download flag is set, a client-side download is triggered using the supplied filename (or a sensible default) while still resolving with the generated data URL. @test

Format validation

• Passing an unsupported format results in a rejected promise with a clear error that lists the allowed formats. @test

Background handling

• Providing a background color applies it to the exported image instead of the default transparent background. @test

Implementation

@generates

API

/**
 * Renders a figure into the given container and exports it as a static image.
 * @param {HTMLElement} container - Target element to host the chart during export.
 * @param {{ data: any[]; layout?: object; config?: object; }} figure - Trace/layout/config used for rendering.
 * @param {{
 *   format: 'png' | 'jpeg' | 'webp' | 'svg',
 *   width?: number,
 *   height?: number,
 *   scale?: number,
 *   backgroundColor?: string,
 *   filename?: string,
 *   download?: boolean
 * }} options - Export options including optional download control.
 * @returns {Promise<{ dataUrl: string; format: string; filename: string }>} Resolves with snapshot metadata.
 */
export function exportChart(container, figure, options);

Dependencies { .dependencies }

plotly.js { .dependency }

Used to render the chart and generate/download the exported image.