Charts - Export
Add a built-in export menu to download charts as PNG, JPEG, SVG, PDF, or CSV, with control over filename, scale, background, and menu items.
#Usage
import { ChartExportMenu, ChartSvg } from '@primeui/vue-chart';<ChartSvg>
<!-- series and axes -->
<ChartExportMenu />
</ChartSvg>Export is opt-in: add ChartExportMenu to show a download button in the chart corner; remove it and no button appears. Clicking opens a menu with PNG, JPEG, SVG, PDF, and CSV options. Control the button position, filename, background color, and available formats through props.
#Basic
Add ChartExportMenu to show an export button in the chart corner. Clicking it opens a dropdown menu with download options. The button sits in the top-right corner by default, 10px inset from the edges.
#Menu Items
Set menuItems to control which download options appear and in what order. Use 'separator' to add a divider between groups. All formats work with both SVG and Canvas renderers. On Canvas charts, SVG export composites the canvas layers into a PNG image embedded inside an SVG wrapper. Include 'downloadCSV' when users need the underlying chart data as spreadsheet-ready text.
#Filename
Set filename to control the default filename used when saving. The extension is appended based on the selected format.
#Scale
Set scale to control the pixel density of raster exports (PNG, JPEG, PDF). The default 2 produces a 2× retina-quality image. Set scale to 3 for print-quality exports or 1 for smaller file sizes.
#Background Color
Set backgroundColor to control the background of exported images. Use 'transparent' for PNG exports without a background when embedding charts on colored pages. Use 'auto' (default) to match the current chart background. Pass a color string to force a specific background regardless of the page theme.
#Button Position
Set buttons to control where the export button appears. Use align for horizontal placement and verticalAlign for vertical placement. Use x and y for pixel-level offset adjustments. In RTL layouts the button flips to the left side.
#API
#ChartExportMenu
| Prop | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Show or hide the export menu button |
filename | string | 'chart' | Default filename for downloads. The extension is appended automatically |
menuItems | ExportMenuItem[] | PNG, JPEG, SVG, PDF, CSV, transparent PNG and SVG | Menu items to display. All formats work with both renderers |
scale | number | 2 | Pixel density multiplier for raster exports. 2 = retina quality |
backgroundColor | string | 'auto' | 'transparent' | 'auto' | Export background color. 'auto' matches the current chart background |
buttons | ExportMenuButtonOptions | - | Export button positioning |
icon | (context: ExportMenuIconContext) => unknown | - | Custom icon renderer for the export button |
render | (context: ExportMenuItemContext) => unknown | - | Custom menu item renderer. Replaces each default menu item independently |
buttonClass | string | - | Additional CSS class applied to the export button element |
menuClass | string | - | Additional CSS class applied to the dropdown menu container |
#ExportMenuItem
Valid values for the menuItems array.
| Value | Description |
|---|---|
'downloadPNG' | Download as PNG (opaque background) |
'downloadPNGTransparent' | Download as PNG with transparent background |
'downloadJPEG' | Download as JPEG |
'downloadSVG' | Download as SVG. SVG mode produces true vector output; Canvas mode embeds a rasterized PNG inside an SVG wrapper |
'downloadSVGTransparent' | Download as SVG with transparent background. Same raster-in-SVG behavior for Canvas mode |
'downloadPDF' | Download as PDF. Rasterized JPEG embedded in PDF-1.4. Quality scales with scale prop |
'downloadCSV' | Download the chart data as CSV using the same data-table model as screen reader output |
'separator' | Visual divider between menu groups |
#ExportMenuButtonOptions
| Prop | Type | Default | Description |
|---|---|---|---|
align | 'left' | 'right' | 'right' | Horizontal button placement. Auto-flips to 'left' in RTL layouts |
verticalAlign | 'top' | 'bottom' | 'top' | Vertical button placement |
x | number | -10 | Horizontal offset in pixels from the aligned edge |
y | number | 10 | Vertical offset in pixels from the aligned edge |
#Export Notes
PDF export is client-side with no external dependencies. Both SVG and Canvas mode charts produce a rasterized PDF. SVG charts rasterize to canvas first, then embed as JPEG. The result is pixel-perfect at the export scale but not true vector. Text is baked into the pixel data and fonts are not embedded separately.
Canvas SVG export composites the canvas layers into a PNG image which is embedded as an <image> element inside an SVG wrapper. The file uses the .svg format but contains raster pixel data, not vector paths, and it is faithful in web browsers.
CSV export downloads the underlying chart data, not a rendered image. It uses the framework-neutral data-table model that also powers the visually hidden screen reader table, so column names follow the chart type: category/value for cartesian and radial charts, x/y for scatter charts, row/column/value for heatmaps, and time/open/high/low/close for candlestick charts. When ChartAccessibility provides dataTableCellFormatter, CSV export applies the same cell formatting so downloaded values match the accessible table.
The screen reader table can be capped with dataTableMaxRows to avoid a very large hidden DOM table, but CSV export builds the table without that row cap so the downloaded file contains every chart row.