Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

React ChartsDownload

Saving chart images by API call.

Download API

We expose the APIs for triggering download via the AgChart class:

download
Function
Starts a browser-based image download for the given AgChartInstance. 
download = (
    chart: AgChartInstance,
    options?: DownloadOptions
) => void;

interface DownloadOptions {
  // Name of downloaded image file. Defaults to `image`.  
  fileName?: string;
  // Width of downloaded chart image in pixels. Defaults to current chart width. 
  width?: number;
  // Height of downloaded chart image in pixels. Defaults to current chart height. 
  height?: number;
  // A MIME-type string indicating the image format. The default format type is `image/png`. Options: `image/png`, `image/jpeg`.  
  fileFormat?: string;
}
getImageDataURL
Function
Returns a base64-encoded image data URL for the given AgChartInstance. 
getImageDataURL = (
    chart: AgChartInstance,
    options?: ImageDataUrlOptions
) => Promise<string>;

interface ImageDataUrlOptions {
  // Width of downloaded chart image in pixels. Defaults to current chart width. 
  width?: number;
  // Height of downloaded chart image in pixels. Defaults to current chart height. 
  height?: number;
  // A MIME-type string indicating the image format. The default format type is `image/png`. Options: `image/png`, `image/jpeg`.  
  fileFormat?: string;
}

The AgChartInstance can be obtained using a React Ref to our <AgChartsReact /> tag, which exposes a chart property.

This example demonstrates:

  • How to obtain a reference to an AgChartInstance.
  • How to use AgChart.download() to start a chart image download.
  • How to use AgChart.getImageDataURL() to create a base64-encoded image URL, and then open it in a new tab.