Toolbar Customization

The primary toolbar carries four built-in sections: the chart-type switcher, the indicators dropdown, the drawing tools, and download. Each can be hidden, and your own controls can sit alongside them.

Hiding what you do not need

const chart = new ApexStock(el, {
  toolbar: {
    items: {
      chartType: false,      // hide the chart-type switcher
      indicators: true,      // every section is shown by default
      drawing: true,
      download: false,
    },
  },
  // ...
})

Or hide the whole bar and drive the chart from your own UI:

toolbar: { show: false }

Adding your own buttons

Declaratively:

toolbar: {
  custom: [
    {
      id: 'legend',
      title: 'Toggle the data legend',   // the tooltip
      icon: '☰',                         // or `html` for markup
      position: 'left',                  // 'left' | 'left-start' | 'right' (default)
      order: 10,
      onClick: (chart, event) => chart.toggleLegend(),
    },
  ],
}

Or at runtime:

chart.addToolbarItem({ id: 'snapshot', title: 'Snapshot', icon: '⤓', onClick: (c) => c.export({ format: 'png' }) })
chart.removeToolbarItem('snapshot')
chart.getToolbarItems()

Key	What it is
id	Required, and the handle for removeToolbarItem
title	The tooltip
icon	Text or an emoji for the button face
html	Markup for the button face, instead of icon
element	A ready-made element to place as-is, instead of icon or html
position	'left', 'left-start', or 'right'. Defaults to 'right'
order	Sort order inside its position group
className	Extra classes on the button
onClick	(chart, event) => void

onClick receives the chart instance, so a custom button has the whole imperative API available without a closure over it.

Theming

A custom button carries .apexstock-toolbar-button, so it picks up the active theme or preset with no styling of your own. Add className when you want one button to look different from the rest.

element skips the button chrome entirely, which is the route for a select, a badge, or a small React-rendered control.

See also

• Theming for the tokens the toolbar follows
• Exporting for what the download section does
• Technical Indicators for the indicators dropdown