ZoomCharts Documentation
Version: 1.21.3 (2025-04-07)
Switch to Version 2.0 (BETA)

Toolbar

Toolbar displays a list of quick access buttons to help navigate the chart. It can be enabled/disabled and configured depending on your needs. Default toolbars lets you do following:

Customizing toolbar items and events

External example with various toolbar items and scenarious: jsFiddle example

Click event on toolbar item.

It is possible to bind click event on existing (default) toolbar item. To do that you need to redefine all toolbar.items.

    toolbar: {
        items: [
            { item: "back", align: "left", onClick: function() { 
                    alert("back button click"); 
                } 
            },
            { item: "zoomOut", align: "left" },
            { item: "logScale", align: "right" },
            { item: "displayPeriod", align: "right" },
            { item: "displayUnit", align: "right" },
            { item: "export", align: "right" },
            { item: "fullscreen", align: "right" }
        ]
    }

In this example onClick event is binded to a back button. This example is for TimeChart, but the approach is similar to other charts. Please note that all toolbar items are not available for all chart families.

Create your own toolbar item.

To add new custom toolbar items you need to use toolbar.extraItems.

This example demonstrates how to do this.

All parameters for toolbar items can be found here.

Adding dropdown items to your custom toolbar item.

Dropdown item is similar to toolbar item. You can also define onClick event to dropdown item. See all parameters available for dropdown item here.

Code sample:

    extraItems: [
        {
            label: "Custom DD",
            showLabel: true,
            align: "right",
            image: "https://zoomcharts.com/dvsl/data/gears.png",
            dropDownItems: [
                {
                    "label": "Custom Item", onClick: function() {
                        alert("custom item clicked");
                    }
                }
            ]
        }
    ]

Adding extra dropdown items to default toolbar items.

This is possible, but only for export item. Even then you need to redefine all existing export dropdown items.

Regarding displayPeriod and displayUnit it is not possible because the dropdown items for these toolbar items are dynamically changed considering the data that can be displayed in chart.

In case you need to know what displayUnit is clicked, you can use API method targetDisplayUnit().

Example

More information about toolbar settings is located in this section.

X