Skip to main content

Toolbars

Overview​

The term toolbars relates to several UI elements.

  • Top toolbar is a primary bar at the top of the chart that contains elements such as Symbol Search, Indicators, and Resolutions.
  • Drawing toolbar is a left-side bar that contains drawings.
  • Widget bar is a right-side bar available in Trading Platform only. This toolbar displays the Watchlist, Details, and News widgets.
  • Time frame toolbar is a bottom bar that displays time period buttons.
info

For detailed information on customizing specific toolbar elements, refer to dedicated sections of the UI elements and Featuresets articles.

Change toolbar style​

The library offers two ways to change the toolbar style:

Custom buttons in top toolbar​

You can add custom buttons or dropdown menus only to the top toolbar. The other toolbars (left, right, and bottom) do not support direct button insertion via the API.

To add elements to the top toolbar, use the following methods:

  • createButton — creates a customizable button. This method provides maximum flexibility since it returns an HTML element (if useTradingViewStyle is false), which you can customize in any way you want. For example, you can create a checkbox or a dropdown menu.
  • createDropdown — creates a dropdown menu. Use this method for a simpler dropdown menu when you don't require custom HTML.
tip

Check out the How to add custom button to top toolbar guide for a hands-on understanding.

Accessible buttons​

Custom buttons, created using the createButton overload with useTradingViewStyle set to true, support accessible keyboard navigation.