Chart

About 9 min read

TwChart · Category: Charts

Settings

These settings are in the properties panel on the right while the widget is selected. The default value is the value the widget has when it is first added to a page.

Chart Configuration

Setting	Type	Default	Description
Axes axesConfigJson	Axis configuration	[ { "id": "left-1", "name": "Primary", "type": "value", "position": "left", "autoScale": true, "min": null, "max": null, "unit": "", "axisLabelShow": true, "axisLabelFormat": "{value} {unit}", "alignTicks": true, "axisLine": { "show": true, "lineStyle": { "color": "" } }, "axisLabel": { "formatter": "{value} {unit}" } } ]	Define the axes used by the chart. Each axis can have its own position, unit, color and scaling settings.
Series seriesConfigJson	Series configuration	[ { "id": "series-1", "name": "Series 1", "tagName": "", "logInfoId": 0, "logIntervalMs": null, "axisId": "left-1", "type": "line", "color": "", "lineWidth": 2, "areaOpacity": 0, "smooth": false, "step": false, "showSymbol": false, "enabled": true, "markPointItems": [], "markLineItems": [ { "type": "average" } ], "markLineCustomValues": [] } ]	Define the series shown on the chart. Each series can have its own tag, log variable, axis and appearance settings.

Time and Data

Setting	Type	Default	Description
Maximum Point Count maxPoints	Number	50	Maximum number of points per series (at least 2, default 50). It sets the automatic sample time and limits the points kept in live mode.
Time Source timeSource	Selection	local	Local uses this chart's own range settings (default). Page time follows the Page time picker of the page: its range replaces Range Mode, History Range Minutes and the calendar settings, the toolbar range buttons are hidden and live mode runs only while the range includes now. Without a picker the chart uses its own range. Options: local Local, page Page time
Comparison comparisonMode	Selection	none	Loads a comparison period next to the main range and draws the same series dashed and lighter on the main time axis. Previous period: the range of the same length right before (in a calendar range the previous calendar period). Previous year: the same calendar range one year earlier (calendar year, not 365 days). The tooltip shows the real date, both values and the change; missing data is never counted as zero. Comparison is not drawn while a stack mode is on (Stacking must be 'Per series'); live mode adds no points to the comparison series. Options: none None, previousPeriod Previous period, previousYear Previous year
Range Mode rangeMode	Selection	relative	Relative loads the last Time Range Minutes up to now (rolling window, default). Calendar loads a calendar period (Calendar Period, Calendar Offset) in the browser time zone, e.g. this year from 1 January; the current period ends now and moves to the new month or year by itself on refresh and in live mode. The calendar menu of the toolbar switches the range at runtime without saving it. Options: relative Relative, calendar Calendar
Navigation Step Minutes historyStepMinutes	Number	60	How far the back and forward toolbar buttons move the time range, in minutes (default 60). In Calendar range mode they move one calendar period.
Sample By (sec, 0=Auto) sampleBySeconds	Number	0	Length of one sample interval in seconds. 0 calculates it from the time range and the maximum point count (or the time bucket).
History Range Minutes timeRangeMinutes	Number	60	Length of the rolling time range in Relative range mode, in minutes (default 60). Not used in Calendar range mode.
Comparison Alignment comparisonAlignment	Selection	elapsed	Same elapsed time (default): an ongoing period is compared only with the same elapsed part of the previous period (e.g. today 00:00-now vs yesterday 00:00-same time). Full period: the whole previous period is loaded. Both options are the same for closed periods and rolling ranges. Options: elapsed Same elapsed time, calendar Full period
Calendar Period calendarPeriod	Selection	year	Period in Calendar range mode: day, week (from Monday), month, quarter or year (default year). Options: day Day, week Week, month Month, quarter Quarter, year Year
Live Refresh Interval ms liveRefreshIntervalMs	Number	0	Update interval in live mode in milliseconds. 0 uses the shortest log interval of the series, otherwise 1000 ms; the minimum is 500 ms. In Consumption Diff Sum mode the range is queried again at most once per minute.
Calendar Offset calendarOffset	Number	0	Which period in Calendar range mode: 0 is the current period, -1 the previous one (e.g. last month or last year), -2 the one before; positive values count as 0.

Series Defaults

Setting	Type	Default	Description
Default Series Type defaultSeriesType	Selection	line	Series type used for series that have no type of their own. Options: line Line, area Area, bar Bar, step Step
Time Bucket consumptionBucketUnit	Selection	auto	Bucket length in Consumption Diff Sum mode. Auto picks day, week, month or year from the length of the time range. Weeks start on Monday; weeks and quarters follow the calendar. Options: hour Hourly, day Daily, week Weekly, month Monthly, quarter Quarterly, year Yearly, auto Auto
Data Source dataSourceMode	Selection	historySample	History Sample shows sampled history values; Consumption Diff Sum shows the consumption (difference) of counter tags per time bucket. Options: historySample History Sample, consumptionDiffSum Consumption Diff Sum
Stacking stackMode	Selection	none	Controls whether series are drawn on top of each other. 'Per series': only series with a stack group are stacked (default; existing charts are unchanged). 'Stacked': all series are summed per time bucket, e.g. for monthly consumption per transformer. '100% stacked': each time bucket is normalized to 100%; the tooltip shows the real value and the share; custom limit lines are hidden and min/max/average marks show shares in %. Works for bar and line/area series; series on different axes are stacked separately. Comparison is not drawn in 'Stacked' and '100% stacked'. Options: none Per series, stacked Stacked, percent 100% stacked
Sample Value Type sampleValueType	Selection	2	How the values in each sample interval are combined: minimum, maximum, average, sum or count. Options: 0 Minimum, 1 Maximum, 2 Average, 3 Sum, 4 Count

Toolbar

Setting	Type	Default	Description
Show Toolbar showToolbar	Checkbox	On	Shows the toolbar with the range presets, navigation, live/pause and zoom buttons.
Zoom Enabled zoomEnabled	Checkbox	On	Allows zooming in the chart. When off, inside zoom and the bottom filter panel are off as well.
Show Zoom Reset Button showZoomResetButton	Checkbox	On	Shows a toolbar button that resets the zoom; only while zooming is enabled.
Range Presets rangePresetsJson	Multi-line text	[ { "label": "1h", "minutes": 60, "enabled": true }, { "label": "6h", "minutes": 360, "enabled": true }, { "label": "24h", "minutes": 1440, "enabled": true } ]	Quick range buttons of the toolbar as a JSON list; each item has label, minutes and enabled. Empty uses 1h, 6h and 24h.
Start In Live Mode autoStart	Checkbox	On	Starts in live mode when the page opens: the time range follows the current time and the data is refreshed automatically; back and forward are hidden until paused. History Sample appends the new tag values; Consumption Diff Sum queries the range again at most once per minute. When off, the chart loads the range once and waits until live mode is started; recommended for slowly changing consumption charts such as monthly totals.
Show Zoom Toggle Button showZoomToggleButton	Checkbox	On	Shows a toolbar button that turns zooming on and off at runtime.
Show Settings Button showSettingsButton	Checkbox	On	Shows the settings button in the toolbar; users can change chart settings at runtime, and the changes are not saved to the page.

Appearance

Setting	Type	Default	Description
Show Grid showGrid	Checkbox	On	Legacy grid setting; used only when Horizontal Grid and Vertical Grid are not set.
Vertical Grid showGridVertical	Checkbox	On	Shows the vertical grid lines of the time axis.
Show X Axis showXAxes	Checkbox	On	Shows the time axis.
Inside Zoom showNavigator	Checkbox	On	Enables mouse/touch zoom and pan interactions directly inside the chart area.
Side Padding (px, 0=Auto) gridSidePadding	Number	0	Space left and right of the plot area in pixels; 0 calculates it from the number of value axes.
Horizontal Grid showGridHorizontal	Checkbox	On	Shows the horizontal grid lines of the value axis.
Show Legend showLegend	Checkbox	On	Shows the legend with the series names.
Show Y Axis showYAxes	Checkbox	On	Shows the value axes together with their names and labels.
Show Bottom Filter Panel showFilterPanel	Checkbox	On	Shows a slider below the chart for choosing the visible part of the range; it turns zooming on as well.
Show Bar Value Labels showBarValueLabels	Checkbox	Off	Writes the value above each bar of bar series.

Tooltip

Setting	Type	Default	Description
Tooltip Trigger tooltipTrigger	Selection	axis	When the tooltip appears: Axis shows all series at the pointer time, Item only the point under the pointer, None turns it off. Options: axis Axis, item Item, none None
Tooltip Axis Pointer tooltipAxisPointerType	Selection	cross	Guide drawn at the pointer with the Axis trigger: Crosshair, Line, Shadow or None. Options: cross Crosshair, line Line, shadow Shadow, none None

Rendering

Setting	Type	Default	Description
Render Type renderType	Selection	canvas	Canvas is faster with many points; SVG stays sharp when zoomed or printed. Options: canvas, svg

Other settings

Setting	Type	Default	Description
Enable Flashing enableFlashing	Checkbox	Off	Makes the widget blink (an opacity pulse every second). Usually bound to an alarm condition.
Log Button logButton	Checkbox	Off	At runtime shows a chart icon when hovering the widget; clicking it adds the Tags bound to the widget to the log Tag list.

Bindings

In the Bindings (Rules) section of the properties panel, a Tag can be bound to the following properties of this widget with a Direct binding. The binding types (Direct, IntRange, FloatRange, Boolean, Bit) are the same for all widgets; they are described on the Widget Reference page.

title, visible, authorization, x, y, width, height, rotation, class, foregroundColor, backgroundColor, borderColor, borderStyle, borderWidth, borderRadius, borderTopLeftRadius, borderTopRightRadius, enableFlashing, logButton, seriesValues.series1, seriesValues.series2, seriesValues.series3, seriesValues.series4, seriesValues.series5, seriesValues.series6, seriesValues.series7, seriesValues.series8, seriesValues.series9, seriesValues.series10, axesConfigJson, seriesConfigJson, maxPoints, timeRangeMinutes, timeSource, comparisonMode, comparisonAlignment, rangeMode, calendarPeriod, calendarOffset, historyStepMinutes, liveRefreshIntervalMs, defaultSeriesType, dataSourceMode, sampleValueType, sampleBySeconds, consumptionBucketUnit, rangePresetsJson, showToolbar, showGrid, showGridHorizontal, showGridVertical, gridSidePadding, showLegend, showBarValueLabels, stackMode, showXAxes, showYAxes, showNavigator, showFilterPanel, autoStart, zoomEnabled, showZoomToggleButton, showZoomResetButton, showSettingsButton, tooltipTrigger, tooltipAxisPointerType, renderType

Common sections

While this widget is selected, the properties panel also shows these common sections: General, Layout, Appearance, Bindings (Rules). These sections are described on the Page Editor page.