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

Angular Data GridDownloading Chart ImageEnterprise

This section shows how to download charts via the Chart Toolbar and Grid API.

Downloading Charts via Chart Toolbar

Users can use the 'Download Chart' Chart Toolbar item to download the rendered chart in the browser.

Note that the downloaded chart image will be in a PNG format.

Downloading Charts via Grid API

There are two ways to download the chart image using the Grid API as shown below:

getChartImageDataURL
Function
Returns a base64-encoded image data URL for the referenced chartId. 
getChartImageDataURL = (
    params: GetChartImageDataUrlParams
) => string | undefined;

interface GetChartImageDataUrlParams {
  // The id of the created chart. 
  chartId: string;
  // A string indicating the image format.
  // The default format type is `image/png`.
  // Options: `image/png`, `image/jpeg`
  fileFormat?: string;
}
downloadChart
Function
Starts a browser-based image download for the referenced chartId. 
downloadChart = (
    params: ChartDownloadParams
) => void;

interface ChartDownloadParams {
  // The id of the created chart. 
  chartId: string;
  // Name of downloaded image file. The chart title will be used by default 
  fileName?: string;
  // A string indicating the image format.
  // The default format type is `image/png`.
  // Options: `image/png`, `image/jpeg`
  fileFormat?: string;
  // Dimensions of downloaded chart image in pixels. The current chart dimensions will be used if not specified.
  dimensions?: { width: number; height: number; };
}

You can use the downloadChart(params) API to download the chart image in the browser.

Alternatively for programmatic use-cases, the getChartImageDataURL(params) API returns the chart image as string (base64 encoded); this is ideal for persisting to a back-end, or opening/presenting the chart image statically.

The example below demonstrates how you can retrieve images rendered from the chart in multiple formats.

  • Click Download Chart Image (PNG) to download a PNG format image via getChartImageDataURL()
  • Click Download Chart Image (JPG 800x500) to download a custom size image via downloadChart()
  • Click Open Chart Image (JPG) to open a JPEG format image in a new window via getChartImageDataURL()

Next Up

Continue to the next section to learn about: Chart Tool Panel API.