Skip to content
RevoGrid [Pro]

Export Charts

Choose an image when you want to share the visual report, or CSV when you want to inspect its values in a spreadsheet. A chart image and a Pivot data export answer different needs.

Try downloading the same chart as an image and CSV. Compare the CSV with Data. Use Pivot export when you need the table/report rather than the chart’s dataset.

Interactive example

Chart exports

Export the chart as SVG, PNG, or PDF, or download its data as CSV.

The example loads when visible.

The example selector separates graphics export, CSV data and download events. Start with the format you need, inspect the current values, then use the corresponding download action.

Chart graphics and data export

Section titled “Chart graphics and data export”

The built-in SVG renderer exports PNG, SVG, and PDF. CSV is provided by the chart plugin independently of the graphics backend. Use charts.getChartDownloadCapabilities(chart.id) to discover the formats available for an existing chart; custom renderers advertise only the formats they implement. The Canvas adapter provides PNG graphics and chart-data CSV.

Graphics capture the committed rendered chart, including its resolved theme, viewport, series visibility, labels, and annotations. SVG remains vector output. Font-family styles are captured, but font files are not embedded in SVG, PNG, or the default raster PDF. A web font loaded only into the page may be unavailable when the browser rasterizes the exported SVG, causing a fallback font. Use a system font or an application-supplied imageEncoder that embeds the needed fonts when exact raster typography is required. See the browser’s SVG image restrictions. The default PDF contains a raster image; an optional local vector encoder is shown below. pdfEncoding reports raster, vector, or custom when known. Programmatic downloads default to PNG:

await charts.downloadChart(chart.id, {
  fileName: 'quarterly-sales',
  fileFormat: 'pdf',
  width: 1_600,
  height: 900,
});


const dataUrl = await charts.getChartImageDataURL(chart.id, {
  width: 1_200,
  height: 675,
});

Chart-data CSV

Section titled “Chart-data CSV”
await charts.downloadChart(chart.id, {
  fileName: 'quarterly-sales',
  fileFormat: 'csv',
  dataScope: 'current',
});


// Include hidden series and categories outside the current viewport.
const csv = charts.getChartCSV(chart.id, {
  dataScope: 'all',
  valueFormat: 'raw',
});

current exports every canonical value in the current viewport for visible series. Sampling and View data virtualization do not reduce the CSV. all exports the complete committed chart frame, including hidden series and categories outside the viewport. Both scopes retain the chart’s query, drill frame, and selected measures; neither fetches original transactions or reloads the provider. The data table’s temporary sort does not reorder the export.

CSV uses numeric values and blank missing cells by default. Choose valueFormat: 'formatted' to use display values and localized number formatting. Hierarchy labels and series labels form the headers; they are presentation text, not a lossless identity interchange format. CSV preserves Unicode and quotes commas, newlines, and double quotes. escapeFormulas: true prefixes spreadsheet formula-like strings with an apostrophe while preserving numeric negative values. This option defaults to false. Comma and CRLF are the default delimiters; columnDelimiter, rowDelimiter, and bom can override the output. The BOM is omitted by default. Width and height are graphics options and are rejected for CSV.

Optional vector PDF

Section titled “Optional vector PDF”
Interactive example

Export with vector PDF support

Load the optional vector export adapter and its bundled fonts.

Try it: Download SVG, PNG, PDF or CSV from the same chart.

The example loads when visible.

What to notice: Vector PDF preserves chart geometry and uses the configured export fonts.

Use this advanced example to inspect the optional vector encoder and font setup. Start with the ordinary PNG or SVG download above unless your document workflow needs vector PDF.

Install and import jspdf and svg2pdf.js in your application, then inject a local encoder. Pivot does not fetch these libraries or fonts automatically.

import { jsPDF } from 'jspdf';
import 'svg2pdf.js';
import {
  createPivotChartsRenderer,
  createPivotChartsVectorPdfEncoder,
} from '@revolist/pivot';


const pdfEncoder = createPivotChartsVectorPdfEncoder({
  createDocument: options => new jsPDF({
    ...options,
    format: [...options.format],
  }),
}, {
  fonts: [
    {
      fileName: 'Report-Regular.ttf',
      fontFamily: 'Report',
      fontStyle: 'normal',
      dataBase64: reportRegularTtfBase64,
    },
    {
      fileName: 'Report-Bold.ttf',
      fontFamily: 'Report',
      fontStyle: 'bold',
      dataBase64: reportBoldTtfBase64,
    },
  ],
});


const renderer = createPivotChartsRenderer({
  fontFamily: 'Report',
  pdfEncoder,
});

Supply the base64 contents of licensed TTF files whose glyphs cover your chart’s text, and register the font styles your labels use. The vector helper maps CSS weights and oblique styles to the registered normal, bold, italic, or bold-italic PDF style and matches family names without regard to case. Registered family names may contain spaces and commas; quotes, backslashes, and control characters are rejected because the converter cannot reliably parse them. SVG and PNG keep the original CSS styles. Standard PDF fonts do not provide general Unicode coverage. Language shaping, font coverage, and converter support determine the result; this is not a universal Unicode or PDF/UA guarantee.

The helper creates a fresh document per export and converts the captured SVG to vector PDF locally. It preserves the SVG’s drawing, including supported patterns and clipping, and converts CSS pixels to PDF points. Conversion errors propagate without falling back to a raster image or a remote server. An arbitrary custom pdfEncoder reports custom; the first-party vector helper reports vector.

Graphics dimensions must be positive and finite. Output is limited to 16,384 pixels per dimension and 64 × 1,024 × 1,024 pixels in total; omitted dimensions use the rendered chart size.

Download lifecycle

Section titled “Download lifecycle”

Listen to pivot-chart-before-download and call preventDefault() to cancel a download before encoding. The detail contains the chart ID, format, operation ID, and owned model/options snapshots. Changing those snapshots does not update the chart or alter the download. pivot-chart-downloaded reports completion of the download action; it cannot confirm that the user saved the file. pivot-chart-download-error reports failures and aborted operations.

Pass an AbortSignal in download options to cancel an operation. Graphics are captured before asynchronous encoding, and the renderer checks cancellation and disposal again before starting a download. Updating the chart while encoding does not change the captured graphics. Injected encoders may finish their own work after cancellation, but the renderer will not start a later download. A canceled before-download event produces no completion event. Invalid options are rejected before a download operation is created, so they do not emit download lifecycle events.

The first-party renderer also accepts imageEncoder and pdfEncoder callbacks for applications that need a different rasterization or PDF pipeline. These callbacks receive an owned SVG snapshot. They must return the encoded data URL and propagate failures; the plugin does not send chart data to an export server.

Common mistakes

Section titled “Common mistakes”
  • CSV exports chart values, while an image captures a visual view. Use Pivot export for the analytical table.
  • Available image formats depend on the renderer and optional encoders. Check capabilities before offering an action in custom UI.
  • A completed download action means the browser received it; application code cannot confirm the user saved the file.

Next steps

Section titled “Next steps”

Continue with save and restore or complete server report export.