Export

ApexGantt exports the chart as an SVG file. The export button is part of the built-in toolbar and is enabled by default.

Built-in SVG export

The toolbar renders automatically inside the chart container. The export button is labeled Export as SVG and is always visible unless disabled:

const gantt = new ApexGantt(document.getElementById('chart'), {
  series: tasks,
  // enableExport: true is the default — the button is always present
})

Clicking it downloads an .svg file that captures the full chart at its current scroll position and zoom level.

Disabling the export button

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

Localizing the button label

The button text comes from locale.messages.exportAsSvg. Override it to match your locale:

const gantt = new ApexGantt(el, {
  series: tasks,
  locale: {
    messages: {
      exportAsSvg: 'Exportar como SVG',
    },
  },
})

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" />
}