Skip to content
TradeX Chart

Export Chart Image API

API reference for exporting charts as images in various formats.

Chart Methods

getCanvas()

Get the chart’s canvas element.

chart.getCanvas(): HTMLCanvasElement

Returns: Canvas element

Example:

const canvas = chart.getCanvas()
console.log(canvas.width, canvas.height)

exportImage()

Export chart as an image.

chart.exportImage(options?: ExportOptions): Promise<Blob>

interface ExportOptions {
  format?: 'png' | 'jpeg' | 'webp'
  quality?: number  // 0-1 for jpeg/webp
  scale?: number    // Resolution multiplier
  width?: number
  height?: number
  backgroundColor?: string
}

Parameters:

  • options (optional): Export configuration

Returns: Promise<Blob>

Example:

const blob = await chart.exportImage({
  format: 'png',
  scale: 2,
  quality: 0.92
})

exportDataURL()

Export chart as a data URL.

chart.exportDataURL(options?: ExportOptions): string

Parameters:

  • options (optional): Export configuration

Returns: Data URL string

Example:

const dataURL = chart.exportDataURL({ format: 'png' })
const img = document.createElement('img')
img.src = dataURL

ChartExporter

Constructor

class ChartExporter {
  constructor(chart: TradeXChart)
}

Parameters:

  • chart: TradeX chart instance

Example:

const exporter = new ChartExporter(chart)

Methods

exportPNG()

Export as PNG.

exportPNG(options?: PNGOptions): Promise<void>

interface PNGOptions {
  filename?: string
  scale?: number
  quality?: number
}

Parameters:

  • options (optional): PNG export options

Returns: Promise<void>

Example:

await exporter.exportPNG({
  filename: 'chart.png',
  scale: 2
})

exportJPEG()

Export as JPEG.

exportJPEG(options?: JPEGOptions): Promise<void>

interface JPEGOptions {
  filename?: string
  scale?: number
  quality?: number
  backgroundColor?: string
}

Parameters:

  • options (optional): JPEG export options

Returns: Promise<void>

Example:

await exporter.exportJPEG({
  filename: 'chart.jpg',
  quality: 0.9,
  backgroundColor: '#ffffff'
})

exportSVG()

Export as SVG.

exportSVG(filename?: string): Promise<void>

Parameters:

  • filename (optional): Output filename

Returns: Promise<void>

Example:

await exporter.exportSVG('chart.svg')

exportPDF()

Export as PDF.

exportPDF(filename?: string): Promise<void>

Parameters:

  • filename (optional): Output filename

Returns: Promise<void>

Example:

await exporter.exportPDF('chart.pdf')

copyToClipboard()

Copy chart image to clipboard.

copyToClipboard(): Promise<void>

Returns: Promise<void>

Example:

await exporter.copyToClipboard()
console.log('Chart copied to clipboard')

Canvas Methods

toBlob()

Convert canvas to Blob.

canvas.toBlob(
  callback: (blob: Blob) => void,
  type?: string,
  quality?: number
): void

Parameters:

  • callback: Function to receive the blob
  • type (optional): MIME type (default: ‘image/png’)
  • quality (optional): Quality 0-1 for lossy formats

Example:

canvas.toBlob((blob) => {
  const url = URL.createObjectURL(blob)
  // Use the blob URL
}, 'image/png')

toDataURL()

Convert canvas to data URL.

canvas.toDataURL(type?: string, quality?: number): string

Parameters:

  • type (optional): MIME type (default: ‘image/png’)
  • quality (optional): Quality 0-1 for lossy formats

Returns: Data URL string

Example:

const dataURL = canvas.toDataURL('image/jpeg', 0.9)

Clipboard API

Write to Clipboard

navigator.clipboard.write(data: ClipboardItem[]): Promise<void>

Example:

const canvas = chart.getCanvas()
canvas.toBlob(async (blob) => {
  await navigator.clipboard.write([
    new ClipboardItem({ 'image/png': blob })
  ])
})

Download Helper

Download Blob

function downloadBlob(blob: Blob, filename: string): void

Parameters:

  • blob: Blob to download
  • filename: Output filename

Example:

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = filename
  link.click()
  URL.revokeObjectURL(url)
}

TypeScript Definitions

declare module 'tradex-chart' {
  export interface ExportOptions {
    format?: 'png' | 'jpeg' | 'webp'
    quality?: number
    scale?: number
    width?: number
    height?: number
    backgroundColor?: string
  }

  export class ChartExporter {
    constructor(chart: TradeXChart)
    exportPNG(options?: PNGOptions): Promise<void>
    exportJPEG(options?: JPEGOptions): Promise<void>
    exportSVG(filename?: string): Promise<void>
    exportPDF(filename?: string): Promise<void>
    copyToClipboard(): Promise<void>
  }

  export interface TradeXChart {
    getCanvas(): HTMLCanvasElement
    exportImage(options?: ExportOptions): Promise<Blob>
    exportDataURL(options?: ExportOptions): string
  }
}