Skip to content
EliteChart

Export a screenshot

Snapshot the chart as PNG or copy to the clipboard — pure-canvas, no external libs.

Chart canvases are first-class image sources. Use the chart handle's exportPng to snap the canvas as a Blob; from there, download or copy to the clipboard.

Quick example

code
'use client';
import { EliteChart, useChartHandle } from '@elitechart/elitechart';
import '@elitechart/elitechart/styles.css';

export function ChartWithExport() {
  const handle = useChartHandle();
  const onExport = async () => {
    if (handle === null) return;
    const blob = await handle.exportPng();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'chart.png';
    a.click();
    URL.revokeObjectURL(url);
  };
  return (
    <>
      <button onClick={onExport}>Export PNG</button>
      <EliteChart symbol="BTCUSD" timeframe="1h" />
    </>
  );
}

How it works

exportPng() reads the chart's offscreen Canvas, scales for devicePixelRatio, and returns a PNG blob. The function is synchronous-feeling but returns a Promise to allow for future worker-side rendering.

Variations

Copy to clipboard

code
await navigator.clipboard.write([
  new ClipboardItem({ 'image/png': await handle.exportPng() }),
]);

JPEG with custom quality (Phase 1b)

The signature will be exportImage({ format: 'png' | 'jpeg', quality }) — see reference/roadmap.

API

MethodReturns
handle.exportPng()Promise<Blob>