ZoomCharts Documentation

TimeChart.settings.toolbar

This section is defined by the type TimeChartSettingsToolbar.

Adjustable settings to manage default and custom toolbar items, as well as toolbar overall appearance.

Properties

align: "left" | "right" | "top" | "bottom"
Default value: "right"
Inherited from: BaseSettingsToolbar

Toolbar align. Note that it can be overridden for individual items using item.align. Also Use 'top' or 'bottom' sides in conjunction with 'left', 'right' align or use 'left', 'right' sides with 'top', 'bottom'.

Valid values:
  • left
  • right
  • top
  • bottom
back: boolean
Default value: true
Inherited from: BaseSettingsToolbar

Whether to show back button in toolbar.

cssClass: string
Default value: null
Inherited from: BaseSettingsToolbar
Introduced in version 1.11.6.

CSS class name for the toolbar HTML panel.

displayPeriod: boolean
Default value: true

Whether to show display period dropdown.

displayUnit: boolean
Default value: true

Whether to show the display unit dropdown.

enabled: boolean
Default value: true
Inherited from: BaseSettingsToolbar

Show/hide toolbar.

export: boolean
Default value: true
Inherited from: BaseSettingsToolbar

Whether to show export dropdown in toolbar.

exportOptions: Array<"png" | "jpg" | "pdf" | "csv" | "xlsx">
Default value: null
Inherited from: BaseSettingsToolbar
Introduced in version 1.15.6.

Specifies what options will be provided for the user in the Export dropdown. Specifying null here will enable all options.

Note that some charts do not support XLSX or CSV option so enabling it here will not have any effect.

Currently the order of the types given in this array are ignored.

extraItems: Array<string | BaseSettingsToolbarItem>
Inherited from: BaseSettingsToolbar

A list of user defined items to show in toolbar. These are displayed in addition to the items collection (which includes the default buttons).

See also
flexibleAllData: boolean
Default value: false

Whether the 'All Data' display period should be selected as long as at least all data is shown

fullscreen: boolean
Default value: false
Inherited from: BaseSettingsToolbar
Introduced in version 1.16.0.

Whether to show the fullscreen button on the toolbar.

isSticky: boolean
Default value: false
Inherited from: BaseSettingsToolbar

Whether the toolbar will "stick" at the edge when scrolling

items: Array<string | BaseSettingsToolbarItem>
Inherited from: BaseSettingsToolbar

A list of toolbar items. If this is specified, it overrides all the default buttons.

Use extraItems to specify items that should be displayed in addition to the defaults.

See also
limitDropdownHeight: boolean
Default value: false
Inherited from: BaseSettingsToolbar

Whether to limit dropdown menu height to the height of the chart

location: "auto" | "inside" | "outside"
Default value: "auto"
Inherited from: BaseSettingsToolbar

Toolbar location inside chart.

Valid values:
  • auto - Picks the best based on other configuration settings. Specifically, this will pick outside if horizontal is enabled, inside otherwise.
  • inside - Inside chart area
  • outside - Outside of chart area
logScale: boolean
Default value: true

Whether to show the Lin/Log button in the toolbar.

showLabels: boolean
Default value: true
Inherited from: BaseSettingsToolbar

Whether to show or hide labels next to toolbar items by default. Note that it can be overridden for individual items using item.showLabels.

side: "left" | "right" | "top" | "bottom"
Default value: "top"
Inherited from: BaseSettingsToolbar

Toolbar placement side. Note that it can be overridden for individual items using item.side.

Valid values:
  • left
  • right
  • top
  • bottom
zoomOut: boolean
Default value: true
Inherited from: BaseSettingsToolbar

Whether to show the Zoom-out button in the toolbar.

zoomOutFunction: (unit: "ms" | "s" | "m" | "h" | "d" | "w" | "M" | "y", count: number, from: number, to: number) => { unit: "ms" | "s" | "m" | "h" | "d" | "w" | "M" | "y" | "milliseconds" | "millisecond" | "sec" | "second" | "seconds" | "min" | "minute" | "minutes" | "hour" | "hours" | "day" | "days" | "D" | "week" | "weeks" | "W" | "mon" | "month" | "months" | "year" | "years" | "Y"; count: number; from: number; to: number; }
Default value: null
Introduced in version 1.12.0.

Create custom zoomout function to specify target unit for each display unit once Zoom-out toolbar item clicked. Also possible to specify new from and to timestamps to manage zoomout range in perspective to current range. If only unit specified, internal logic will be applied that is 30 times wider time range than compared to range before Zoom-out toolbar item clicked. If only from and to timestamps specified than unit will be used as a next unit to current display item that's available of display units. If according to min, max unit width is not possible to show specified range, the middle of both timestamps will be the center of zoomout range and some portion of both sides may be cut down.

Parameters
unit: "ms" | "s" | "m" | "h" | "d" | "w" | "M" | "y"

Current display unit.

count: number

The count of specified units.

from: number

Timestamp of time range before Zoom-out.

to: number

Timestamp of time range before Zoom-out.

Return value
Data type: anonymous type

Target unit referenced for current display unit and from, to timestamps. In case of null returned, the next higher display unit will be chosen.

Properties
unit: "ms" | "s" | "m" | "h" | "d" | "w" | "M" | "y" | "milliseconds" | "millisecond" | "sec" | "second" | "seconds" | "min" | "minute" | "minutes" | "hour" | "hours" | "day" | "days" | "D" | "week" | "weeks" | "W" | "mon" | "month" | "months" | "year" | "years" | "Y"
count: number
from: number
to: number
X