Export Charts as PNG, SVG, or CSV

ApexCharts provides three programmatic export methods: dataURI for PNG images, getSvgString for SVG vector files, and exportToCSV for data downloads. All three require the Exports feature to be registered before any chart is created.

Registering the Exports Feature

The Exports feature is not included in the default apexcharts/core bundle. This is intentional: keeping optional features out of the core bundle reduces the JavaScript your users download. You must import the feature once, before calling new ApexCharts(...).

If you use the standard full-bundle import, the feature is already included and no extra import is needed.

// Option A: tree-shaking setup — import only the exports feature
import ApexCharts from 'apexcharts/core'
import 'apexcharts/features/exports'

// Option B: full bundle (all features included, no extra import needed)
import ApexCharts from 'apexcharts'

The import registers the feature globally. Any chart created after the import can use the export methods.

Download PNG

chart.dataURI() returns a Promise that resolves to { imgURI: string }. The imgURI value is a base64-encoded PNG data URI. You can assign it to an <img src>, open it in a new tab, or attach it to a download link.

The example below triggers a file download when the user clicks a button:

document.querySelector('#download-btn').addEventListener('click', async () => {
  const { imgURI } = await chart.dataURI()
  const a = document.createElement('a')
  a.href = imgURI
  a.download = 'chart.png'
  a.click()
})

Internally, dataURI clones the chart SVG, strips tooltip and toolbar elements so they do not appear in the exported image, inlines legend CSS, converts any image fills to base64, then serializes to canvas and produces a PNG data URL.

High-DPI (2x) Export

By default, dataURI exports at 1:1 pixel density relative to the rendered chart. On high-DPI displays this can look soft when the PNG is viewed at full size. Pass scale: 2 to produce a 2x-resolution image. The chart on screen does not change; only the exported PNG is larger.

const { imgURI } = await chart.dataURI({ scale: 2 })

You can also fix the export width independently of the rendered chart width using the width option:

const { imgURI } = await chart.dataURI({ width: 1200 })

Preview the Chart in an img Element

Because imgURI is a standard data URI, you can assign it directly to any <img> element. This is useful for an in-page preview before prompting the user to save.

const { imgURI } = await chart.dataURI()
document.querySelector('#preview').src = imgURI

Export SVG

chart.getSvgString() returns a Promise that resolves to the raw SVG markup as a string. SVG is a vector format, so the exported file scales to any size without quality loss. It is also suitable as input for PDF renderers and design tools.

document.querySelector('#export-svg').addEventListener('click', async () => {
  const svgString = await chart.getSvgString()
  const blob = new Blob([svgString], { type: 'image/svg+xml' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'chart.svg'
  a.click()
  URL.revokeObjectURL(url)
})

URL.revokeObjectURL releases the in-memory blob URL after the download starts. Omitting it causes a memory leak for long-running pages with repeated exports.

Export CSV

chart.exportToCSV() triggers a browser file download immediately. It returns no value; the download starts as a side effect.

chart.exportToCSV({ fileName: 'sales-data' })

The default delimiter is a comma. For European locales where commas are used as decimal separators, switch to a semicolon:

chart.exportToCSV({
  fileName: 'sales-data',
  columnDelimiter: ';',
  lineDelimiter: '\n'
})

Available options:

Option	Type	Description
`fileName`	`string`	Base file name without extension. Defaults to the chart title.
`columnDelimiter`	`string`	Character between column values. Default: `,`
`lineDelimiter`	`string`	Character between rows. Default: `\n`
`series`	`array`	Subset of series to include. Omit to export all series.

When the Exports feature is registered, the toolbar's download button automatically renders a dropdown with PNG, SVG, and CSV options. No extra code is required to wire up the downloads. Enable the toolbar in your chart options:

const options = {
  chart: {
    toolbar: {
      show: true,
      tools: {
        download: true
      }
    }
  },
  // ... rest of your options
}

Users can then click the camera icon in the top-right corner of the chart and choose their preferred format. This is the fastest path to giving users export capability without writing any download logic yourself.

React Example

When using react-apexcharts, access the underlying ApexCharts instance through the chartRef prop. The ref is populated after the chart mounts, so call export methods only in response to user events or after componentDidMount / useEffect.

import { useRef } from 'react'
import ReactApexChart from 'react-apexcharts'

export default function MyChart({ options, series }) {
  const chartRef = useRef(null)

  async function handleDownload() {
    const { imgURI } = await chartRef.current.dataURI()
    const a = document.createElement('a')
    a.href = imgURI
    a.download = 'chart.png'
    a.click()
  }

  return (
    <>
      <ReactApexChart
        chartRef={chartRef}
        type="line"
        options={options}
        series={series}
        height={350}
      />
      <button onClick={handleDownload}>Download PNG</button>
    </>
  )
}

Generate a PDF with jsPDF

dataURI integrates directly with jsPDF. Use scale: 2 to keep the PNG sharp at print resolution. addImage accepts the data URI string directly; no conversion is needed.

import { jsPDF } from 'jspdf'

async function exportToPDF(chart) {
  const { imgURI } = await chart.dataURI({ scale: 2 })
  const pdf = new jsPDF({ orientation: 'landscape' })
  // addImage(imageData, format, x, y, width, height) — dimensions in mm
  pdf.addImage(imgURI, 'PNG', 10, 10, 280, 150)
  pdf.save('report.pdf')
}

Install jsPDF separately: npm install jspdf. ApexCharts does not bundle it.

Server-Side Rendering

dataURI and getSvgString require a rendered DOM chart. They cannot be called on a Node.js server because there is no browser canvas or SVG serialization context.

If you need to generate a chart image on the server (for email, PDF pipelines, or open-graph images), use the apexcharts/ssr entry point instead:

import { renderToString } from 'apexcharts/ssr'

const svgString = await renderToString(options)

renderToString runs without a DOM and returns an SVG string. From there you can pipe it to sharp, puppeteer, or any headless rasterizer to produce a PNG.

Limitations

Web fonts may not embed in PNG exports. If your chart uses a custom fontFamily loaded via @font-face or Google Fonts, the font must be fully loaded in the browser before you call dataURI. If the font is still downloading, the canvas falls back to the browser default. Call document.fonts.ready before triggering the export to wait for all fonts to load.

dataURI produces PNG only. The method converts SVG to canvas internally. Some advanced SVG features (complex CSS filters, <foreignObject>, certain blend modes) may render differently or not at all in the canvas step. If exact vector fidelity matters, use getSvgString instead and work with the SVG directly.

Call export methods only after render completes. Calling dataURI or getSvgString before chart.render() resolves throws an error because there is no DOM node to serialize. Always await chart.render() first, or call export methods in response to the mounted event.