ZoomCharts Documentation
Version: 1.21.1 (2024-11-08)
Switch to Version 2.0 (BETA)

TimeChart.settings

This section is defined by the type TimeChartSettings.

Properties

area: TimeChartSettingsArea
Inherited from: BaseSettings
View section details

Chart area related settings.

assetsUrlBase: string
Default value: ""
Inherited from: BaseSettings

The URL root where the ZoomCharts library and assets are located. For example, if the base.css file is available at 'http://server/css/zoomcharts/zc.css' then this value should be set to 'http://server/css/zoomcharts/'. Note that the library will try to determine its location automatically by searching the included script tags. So this property can be skipped if the assets folder is located next to 'zoomcharts.js' file on the server.

chartTypes: anonymous type
Inherited from: LinearChartSettings

Default series settings for each series rendering type. Use this to configure all series of specific type to get line or column chart or combination of them.

Properties
candlestick: TimeChartSettingsSeriesCandleStick
View section details

Series type to show an opening and closing value on top of a total variance.

columns: TimeChartSettingsSeriesColumns
View section details

Series type to render values as vertical bars.

line: TimeChartSettingsSeriesLines
View section details

Series type to connect value points by lines.

container: string | HTMLElement
Default value: null
Inherited from: BaseSettings

Element of the page where the chart will be inserted. Any HTML element should work, for example you can use a <div>.

Any contents of the element will be cleared - this behavior can be used to specify a loading message as the initial content, for example <div>Chart is being initialized...</div>.

Note that a single element can host only one chart. If the same container is given to another chart, the previous chart will be automatically disposed.

Unless parentChart is specified, the value of the property is mandatory and can only be specified while creating the chart, not with updateSettings. The value can be either an ID of an existing element or a reference to a DOM element.

credits: BaseSettingsCredits
Inherited from: BaseSettings
View section details

Settings for displaying chart credits. Use it as a reference to additional data sources if necessery.

Chart including credits

Note that even if credits enabled on page load, it's possible to hide on exported images.

currentTime: TimeChartSettingsCurrentTime
View section details

Moving time line that represents the current time, mainly to analyze real-time data changes. To achieve it, use server time of page load and adjust time zone offset.

data: Array<TimeChartSettingsData>
Default value: [ { "id": "default", "url": null, "urlParameters": [], "postprocessorFunction": null, "preloaded": null, "format": "JSON", "requestTimeout": 40000, "numberOfParallelRequests": 3, "units": [ "ms", "s", "m", "h", "d", "M", "y" ], "urlByUnit": null, "requestMaxUnits": 10000, "prefetchRatio": 1, "minimizeRequests": false, "cacheSize": 500000, "timestampInSeconds": false, "stringTimestampFormat": null, "timeZoneOffset": null, "dataFunction": null, "suppressWarnings": false, "useSmallerUnitCache": true, "allowUnitCacheMultiples": false } ]
Inherited from: BaseSettings
View section details

Settings used to load data into chart. Customise preferred data source feeding methods. You can use one of these options: url, data function, preloaded data.

events: TimeChartSettingsEvents
Inherited from: BaseSettings
View section details

The events used to handle user interaction with UI elements.

horizontal: boolean
Default value: false
Inherited from: LinearChartSettings
info: LinearChartSettingsInfoPopup
Inherited from: LinearChartSettings
View section details

Info popup when hovering over columns or lines. Content returned in a form of html and is relevant to context of series hovered.

interaction: TimeChartSettingsInteraction
Inherited from: BaseSettings
View section details

A variety of interaction options that includes scrolling, zooming and swipe.

items: anonymous type
Properties
styleFunction: (style: LinearChartSettingsSeriesColumnsStyle, rendererData: LinearChartRendererData, dataIndex: number, seriesSettings: TimeChartSettingsSeries) => void
Default value: null

Dynamically determine item style from data.

Parameters
style: LinearChartSettingsSeriesColumnsStyle

item to apply predefined style

rendererData: LinearChartRendererData

data relevant to item

dataIndex: number

item position in the value array

seriesSettings: TimeChartSettingsSeries
localization: TimeChartSettingsLocalization
Inherited from: BaseSettings
View section details

Localizeable strings including export type options and useful default buttons used for chart interaction. Buttons like to navigate back, set the chart on full screen and others.

milestones: Array<TimeChartSettingsMarker>
Introduced in version 1.9.0.
View section details

Time line markers that represents event on time.

navigation: anonymous type

Settings to specify initial view once the page loaded.

Note that API methods such as [setDisplayPeriod][1] or [displayUnit][2] should be used to set these values after the chart has been loaded. [1]: time-chart/api-reference/api.html#setDisplayPeriod [2]: time-chart/api-reference/api.html#displayUnit

Properties
followAnchor: boolean
Default value: false

Whether to allow the chart view to follow display anchor. Use it for real-time updates.

initialDisplayAnchor: number | "newestData" | "now" | "oldestData"
Default value: "newestData"

Specifies anchor position for initial time period. Use it together with initialDisplayPeriod from which beginning is calculated.

Use [setDisplayPeriod()][1] to change the value after the chart has been loaded. [1]: time-chart/api-reference/api.html#setDisplayPeriod

Valid values:

  • now - set end of the period to current time
  • newestData - set end of the period to newest data
  • oldestData - set beginning of the period to oldest data
  • time stamp - set period end time in UTC milliseconds
initialDisplayPeriod: string
Default value: "max"

Time period to show initially. Use in combination with intitialDisplayAnchor.

Possible values:

  • max - shows all data
  • timestamp > timestamp - shows the time range specified by two UTC timestamps, in milliseconds.
  • custom time period like 10 seconds, 5 m.

Use [setDisplayPeriod()][1] to change the value after the chart has been loaded. [1]: time-chart/api-reference/api.html#setDisplayPeriod

initialDisplayUnit: string
Default value: "auto"

Data display unit to use for initial view.

Possible values:

  • auto - determine automatically based on time range
  • custom time unit like 1 m, 3 weeks.

Use [displayUnit()][1] to change the value after the chart has been loaded. [1]: time-chart/api-reference/api.html#displayUnit

parentChart: BaseApi
Inherited from: BaseSettings

The parent chart within which the new chart will be rendered. If this property is specified, container cannot be specified.

Use area.left, area.top, area.width and area.height settings to position the subchart within parent chart.

See also
series: Array<TimeChartSettingsSeries>
Default value: []
Inherited from: LinearChartSettings
View section details

Array of series in the chart. Each of the series can be different type, can use different data source and aggregation. Additionally, series can be clustered and stacked.

seriesDefault: TimeChartSettingsSeries
Inherited from: LinearChartSettings
View section details

The default series used as the chart dominant data. Use settings.series array to specify actual series.

stacks: Dictionary<LinearChartSettingsStack>
Inherited from: LinearChartSettings
View section details

Defines stack settings to use in series. Each property is a stack name and value is stack settings. Values stack of each series on top of each other in the specified series order. Those, stacked bars help to visualize data that is a sum of parts, each of which is in a series.

style: anonymous type
Inherited from: LinearChartSettings

The default style settings for series.

Properties
columnColors: Array<string>
Default value: [ "#32CD32", "#36BEFF", "#FBBD30", "#EE3431", "#894BBC", "#0EC9AC", "#524BBC" ]

The default colors applied to the series with type: "columns". The colors are applied in order to all series that do not specify an explicit style.

lineColors: Array<string>
Default value: [ "#32CD32", "#36BEFF", "#FBBD30", "#EE3431", "#894BBC", "#0EC9AC", "#524BBC" ]

The default colors applied to the series with type: "line". The colors are applied in order to all series that do not specify an explicit style.

theme: TimeChartSettings
Default value: { "advanced": { "themeCSSClass": "DVSL-flat" }, "area": { "style": { "noData": { "fillColor": "#DDD", "image": "builtin://linearchart-no-data-light" } } }, "chartTypes": { "columns": { "style": { "gradient": 1, "depth": 0 } } }, "timeAxis": { "style": { "showMajorTimeBalloons": false, "showMinorTimeBalloons": false, "majorTimeLabel": { "fillColor": "#000", "shadowColor": null }, "minorTimeLabel": { "fillColor": "#000", "shadowColor": null }, "dateLighten": { "fillColor": "rgba(0,0,0,0.05)" } } } }
Inherited from: BaseSettings

Theme to apply. You can either use this to share configuration objects between multiple charts or use one of the predefined themes.

See also
timeAxis: TimeChartSettingsTimeAxis
View section details

X-axis line representing time at the bottom of chart.

Time line made of two different time graduations. Next image shows time line graduation by days and 3 hours. time axis

As you change the zoom level time axis graduation changes accordingly.

title: BaseSettingsTitle
Inherited from: BaseSettings
View section details

The chart's main title.

toolbar: TimeChartSettingsToolbar
Inherited from: BaseSettings
View section details

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

valueAxis: Dictionary<LinearChartSettingsValueAxis>
Inherited from: LinearChartSettings
View section details

Configures one or more value axis. If no axis are defined, valueAxisDefault settings are used to automatically create a single value axis.

valueAxisDefault: LinearChartSettingsValueAxis
Inherited from: LinearChartSettings
View section details

The default settings inherited by all value axis.

X