Version: 1.0.0
Custom buttons
The CustomButtons module lets developers register their own buttons on the top toolbar, wiring them to any chart action via the ChartingAPI.
Overview
Buttons are registered through window.ChartingAPI.registerTopToolbarButton(). Once registered, the toolbar module automatically renders them and handles click events, passing the active chart instance to your handler.
Registering a Button
Open custom-buttons.js and call registerTopToolbarButton:
window.ChartingAPI.registerTopToolbarButton('clear_drawings', {
label: 'Clear',
tooltip: 'Clear all drawings',
alignment: 'right',
iconSvg: '<svg width="14" height="14"...></svg>',
onClick: function(chart, btn, e) {
chart.drawings = [];
chart.render();
}
});
label: 'Clear',
tooltip: 'Clear all drawings',
alignment: 'right',
iconSvg: '<svg width="14" height="14"...></svg>',
onClick: function(chart, btn, e) {
chart.drawings = [];
chart.render();
}
});
Button Options
| Option | Type | Description |
|---|---|---|
| label | string | Button display text shown in the toolbar. |
| tooltip | string | Optional hover tooltip text. |
| alignment | 'left' | 'right' | Where the button is placed. Default is 'left'. |
| iconSvg | string | Optional inline SVG string used as the button icon. |
| onClick | function | Handler called with (chart, buttonElement, event). |