Various manipulations with toolbars and toolbar items are available for you.
It is possible to bind click events to toolbar items and even toolbar dropdown items.
But there are limits and some tricks you should know.
So here are some of the frequently asked questions / issues.
Example with various toolbar items and scenarious:
https://jsfiddle.net/4pcr20Ly/
1. 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 as you can see onClick
event is added for 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.
2. Create your own toolbar item.
For this you need to use toolbar.extraItems.
See this example.
All parameters available for toolbar item can be seen here.
3. 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.
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");
}
}
]
}
4. 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 if you need to know what displayUnit
is clicked, you can use API method targetDisplayUnit()
.
See this example.
More information.
For more information about toolbars, please see our documentation:
TimeChart Toolbar;
FacetChart Toolbar;
NetChart Toolbar;
PieChart Toolbar;
GeoChart Toolbar;