Toolbar
FusionCharts Suite XT introduces the toolbar, starting from version 3.11.0. The advantage of having a toolbar is that it manages all the UI action elements (context menus, checkboxes, buttons) centrally. This provides a clean, uniform look and a better, more meaningful and logical grouping.
The new toolbar has changed the way certain chart elements are implemented. The table below summarizes these changes:
| Chart Type | Component | Previous Implementation | Current Implementation | |
|---|---|---|---|---|
| Multi-axis line chart | Checkboxes to show/hide axes lines | HTML checkboxes | Pure SVG exportable checkboxes | |
| Dragable column, line, and area charts | Menu to change y-axis limits | Menu placed at the bottom-left side of the chart | Context menu | |
| Drag-node chart | Menu to add/edit/delete nodes, labels, and connectors | Menu placed at the bottom-left side of the chart | Context menu | |
| Real-time charts | Message logger | Menu placed at the bottom-left side of the chart | Context menu | |
| Real-time charts | Real-time menu | Menu placed at the bottom-left side of the chart | Context menu |
The samples shown below showcase the difference between the current and the previous implementations.
The drag-node chart below shows the implementation of the toolbar:
Click here to edit the above chart.
The multi-axis line chart below shows the current implementation of the checkboxes used to show/hide the axes lines. This implementation uses pure SVG exportable checkboxes while the previous implementation used HTML checkboxes.
To do so, specify the hex code of the checkbox color using the checkBoxColor attribute.
Refer to the code below:
{
"chart": {
"checkBoxColor": "#3333cc"
}
}Click here to edit the above chart.
The difference between the current and previous implementation of the checkboxes in the multi-axis line chart is that you can configure the current checkboxes to set a custom checkbox color.