Vue Data Grid: Downloading Chart Image

This section shows how to download the chart image though via the Grid API.

It is possible to retrieve a base64 encoded image rendered from the chart using the getChartImageDataURL(params) API. This API returns a string containing the requested data URL which is ideal for saving to a database and downloading the chart image.

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;
}

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

• Click "Download chart PNG" to download a PNG format image.
• Click "Download chart JPEG" to download a JPEG format image.
• Click "Open PNG" to open a PNG format image of the chart in a new window.
• Click "Open JPEG" to open a JPEG format image of the chart in a new window.

// Loading...

Next Up

Continue to the next section to learn about: Chart Customisation.