Export

ApexGantt exports the chart as SVG, PNG, or PDF. The export button is part of the built-in toolbar and is enabled by default; the same formats are available programmatically through exportChart().

Export formats

Format	Output	Notes
'svg' (default)	Vector	Scales without quality loss
'png'	Raster image	Rasterizes the chart at its current view
'pdf'	Single-page PDF	Embeds a raster on one page; dependency-free

Built-in export button

The toolbar renders automatically inside the chart container. The button label matches the active exportFormat (Export as SVG, Export as PNG, or Export as PDF) and is always visible unless disabled:

const gantt = new ApexGantt(document.getElementById('chart'), {
  series: tasks,
  exportFormat: 'pdf',   // toolbar button format; defaults to 'svg'
})

Clicking it downloads a file that captures the full chart at its current scroll position and zoom level. Under row virtualization the full dataset is captured, not just the visible rows.

Exporting programmatically

exportChart(format?) triggers a download from your own UI. format overrides exportFormat for that call and defaults to it when omitted. It returns a promise that resolves when the download starts:

await gantt.exportChart('png')
await gantt.exportChart('pdf')
await gantt.exportChart()        // uses the exportFormat option

Disabling the export button

const gantt = new ApexGantt(el, {
  series: tasks,
  enableExport: false,
})

The exportChart() method still works when the toolbar button is disabled.

Localizing the button label

The button text comes from locale.messages: exportAsSvg, exportAsPng, or exportAsPdf depending on the active format. Override the one matching your exportFormat:

const gantt = new ApexGantt(el, {
  series: tasks,
  exportFormat: 'png',
  locale: {
    messages: {
      exportAsPng: 'Exportar como PNG',
    },
  },
})

Rendering the toolbar in a custom container

By default the toolbar renders inside the chart. Use renderToolbar() to mount it in any DOM element — for example, a fixed header or a separate panel:

const gantt = new ApexGantt(document.getElementById('gantt'), {
  series: tasks,
})

gantt.render()
gantt.renderToolbar(document.getElementById('my-toolbar'))

The toolbar retains all built-in controls (zoom in/out, export, undo/redo) and any custom toolbarItems you configure.

Adding custom toolbar buttons

Pass a toolbarItems array to insert your own buttons alongside the built-in controls. Each item is a ToolbarButton, ToolbarSelect, or ToolbarSeparator.

ToolbarButton

const gantt = new ApexGantt(el, {
  series: tasks,
  enableSelection: true,
  toolbarItems: [
    {
      type: 'button',
      label: 'Export JSON',
      tooltip: 'Download task data as JSON',
      position: 'right',
      onClick: ({ selectedTasks }) => {
        const data = selectedTasks.length > 0 ? selectedTasks : gantt.getSelectedTasks()
        const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
        const url = URL.createObjectURL(blob)
        const a = Object.assign(document.createElement('a'), { href: url, download: 'tasks.json' })
        a.click()
        URL.revokeObjectURL(url)
      },
    },
  ],
})

ToolbarButton with icon

Pass an SVG string to icon. The button renders the icon with an optional label beside it:

const DOWNLOAD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`

toolbarItems: [
  {
    type: 'button',
    icon: DOWNLOAD_ICON,
    tooltip: 'Export JSON',
    onClick: () => { /* ... */ },
  },
],

Button gated on selection

requiresSelection: true automatically disables the button when nothing is selected:

{
  type: 'button',
  label: 'Archive',
  requiresSelection: true,
  showCount: true,   // shows "Archive (3)" when 3 tasks are selected
  onClick: ({ selectedTasks }) => {
    archiveTasks(selectedTasks.map(t => t.id))
  },
},

ToolbarSeparator

Inserts a thin vertical line between groups of controls:

toolbarItems: [
  { type: 'separator', position: 'right' },
  { type: 'button', label: 'Export JSON', onClick: () => { /* ... */ } },
],

ToolbarSelect

A <select> dropdown — useful for filtering or grouping controls:

toolbarItems: [
  {
    type: 'select',
    label: 'View',
    placeholder: 'All tasks',
    position: 'left',
    options: [
      { value: 'all',         text: 'All tasks' },
      { value: 'in-progress', text: 'In progress' },
      { value: 'done',        text: 'Done' },
    ],
    onChange: (value) => {
      // filter tasks based on value
    },
  },
],

ToolbarItem reference

ToolbarButton

Property	Type	Default	Description
type	'button'	Required	—
label	string	—	Button text
icon	string	—	SVG string rendered as the button icon
tooltip	string	—	title attribute on the button
position	'left' | 'right'	'right'	Where to insert relative to built-in controls
disabled	boolean | (ctx) => boolean	false	Static or dynamic disabled state
requiresSelection	boolean	false	Auto-disable when nothing is selected
showCount	boolean	false	Append (N) to the label with the selection count
onClick	(ctx) => void	Required	Click handler receiving { selectedTasks }

ToolbarSelect

Property	Type	Description
type	'select'	—
label	string	Optional label before the <select>
placeholder	string	Option shown when no value is selected
position	'left' | 'right'	Insertion position
options	{ value, text }[]	Dropdown options
onChange	(value, ctx) => void	Called when the selection changes

React example

import { ApexGanttChart } from 'react-apexgantt'
import type { GanttUserOptions } from 'react-apexgantt'

const options: Omit<GanttUserOptions, 'series'> = {
  enableExport: true,
  enableSelection: true,
  toolbarItems: [
    { type: 'separator' },
    {
      type: 'button',
      label: 'Share',
      requiresSelection: true,
      showCount: true,
      onClick: ({ selectedTasks }) => {
        console.log('Share tasks:', selectedTasks.map(t => t.id))
      },
    },
  ],
  locale: {
    messages: { exportAsSvg: 'Download SVG' },
  },
}

export default function ExportGantt() {
  return <ApexGanttChart tasks={tasks} options={options} height="500px" />
}