Advanced Data Key Configuration

The Data key configuration dialog controls how a single data key is fetched, processed, and displayed within a widget.

The available settings are not the same for every key. They depend on the widget type, the selected Datasource type, the purpose of the key, and other configuration choices that may reveal or hide additional options. The dialog always exposes a common set of data key settings and provides further options depending on the current configuration.

To open the dialog, click the edit (pencil) icon on a data key in the widget’s Datasource, Columns, or Series configuration. In widgets that list keys as rows, the same dialog can also be opened from the settings (gear) icon on the corresponding row.

General settings identify the key and control how its raw value is prepared. Which fields appear depends on the Datasource type and the widget.

• Key — for entity-backed Datasource types (Device, Entity), the telemetry key, attribute, or entity field to read from the entity.
• Label — the display name of the key in the widget. Defaults to the key name.

For Function Datasources, the dialog shows a Label instead of a Key, and the values are produced by a Data generation function (see below); there is no telemetry key to select.

Some widgets set labels in their own appearance section rather than in this dialog. For example, the Value card dialog shows only the Key and omits the Label, Units, and Decimals fields.

Sets the unit displayed next to the value. Click the field to open the Unit settings dialog, where you can configure unit conversion between metric, imperial, and hybrid unit systems.

Number of decimal places used when displaying the value.

Available in chart widgets. Sets the color of the data series.

Available for entity-backed Datasource types (Device, Entity). Determines how several values within the widget time window are reduced to the value used by this key:

The selected aggregation is applied together with the widget time window.

Available in certain chart widgets when Aggregation is set to a value other than None. Computes the change in the aggregated value relative to a reference period.

Toggle Enable delta calculation and configure:

Comparison period — reference time interval:

• Previous interval (default)
• Day ago
• Week ago
• Month ago
• Year ago
• Custom interval

Delta calculation result — what to display:

• Previous value — the raw value from the comparison period.
• Delta (absolute) — the absolute difference between the current and reference values.
• Delta (percent) — the difference expressed as a percentage.

Available for Function Datasources. Generates the values for the key, which lets you preview or simulate data without a connected device. Edit the function body in the built-in code editor.

Signature: function(time, prevValue): any

The function returns the value for the current datapoint.

Available for entity-backed Datasource types (Device, Entity). Enable Use data post-processing function to transform each value after it is received from the server and before it is displayed.

Signature: function(time, value, prevValue, timePrev, prevOrigValue): any

The function returns a primitive value (number, string, or boolean).

Examples:

Multiply all values by 10:

return value * 10;

Relative change between consecutive datapoints:

if (prevOrigValue) {
  return (value - prevOrigValue) / prevOrigValue;
} else {
  return 0;
}

The Advanced tab for table and entity widgets (for example, the Entities table and Alarms table) groups the settings under Column settings and controls how the key is rendered as a table column.

Overrides the column header text. By default, the header displays the key label.

Sets the column width in pixels (for example, 200px) or as a percentage (for example, 20%). Leave the default 0px for automatic width.

Controls the column’s initial visibility:

• Visible — the column is shown by default.
• Hidden — the column is hidden by default.
• Hidden in mobile mode — the column is visible on desktop and hidden on mobile.

Controls whether users can show or hide this column via the widget’s column selection menu:

• Enabled — the column appears in the selection menu.
• Disabled — the column is excluded from the selection menu.

Determines whether the column is included when exporting widget data:

• Always — always included, regardless of current visibility.
• Only if column visible — included only when the column is currently shown.
• Never — never included in exports.

When enabled, prevents users from sorting the table by this column.

Enable this option to apply custom CSS styles to the cell based on its value. Additional configuration becomes available under the Advanced settings panel of the dialog.

Signature: function(value, entity, ctx): {[key: string]: string}

The function returns a CSS key/value object.

Example — color the value based on a temperature threshold:

var temperature = value;
var color = temperature > 25 ? 'red' : 'green';
return {
  fontWeight: 'bold',
  color: color
};

Enable this option to replace the default cell content with custom HTML. Additional configuration becomes available under the Advanced settings panel of the dialog.

Signature: function(value, entity, ctx): string

The parameters are the same as for the cell style function. The function returns an HTML string rendered inside the cell.

Example — render a boolean value as a colored circle:

var active = value;
var color = active === 'true' ? '#078949' : '#B03737';
return '<span style="font-size: 18px; color: ' + color + '">&#x25CF;</span>';

When the cell content function is enabled, an additional Use cell content function on export option appears. When enabled, the function is also applied to exported data; when disabled, the raw value is written to the export output.

The Advanced tab for chart widgets (for example, the Time series chart and Bar chart with labels) controls how the series is rendered.

• Show in legend — shows the series name and current value in the chart legend.
• Hidden by default — hides the series on initial load; users can reveal it by clicking the series name in the legend.

Assigns the series to a Y axis. Select default to use the shared axis, or choose a named axis configured in the widget settings to display a separate scale for this series.

Toggle between Line and Bar to change how the series is rendered. The appearance settings below adapt to the selected series type.

Controls line appearance. Available when Series type is Line.

• Show line — toggles line rendering on or off.
• Step line — renders the line as a step function. Select where the step occurs: Start, Middle, or End.
• Smooth line — renders the line as a smooth curve instead of straight segments.
• Line type — Solid, Dashed, or Dotted.
• Line width — stroke width in pixels (default: 2).

Controls the data point markers on the series.

• Show points — displays a marker at each datapoint.
• Point label — shows the value next to each marker. When enabled, configure the label position (Top or Bottom), font, and color.
• Point label background — adds a colored background behind the label. Available when Point label is enabled.
• Point shape — marker shape, such as Empty circle, Circle, Rectangle, Rounded rectangle, Triangle, Diamond, Pin, Arrow, or None.
• Point size — marker size in pixels (default: 4).

Controls the area fill beneath the series:

• None — no fill (default).
• Opacity — a solid fill with a configurable opacity level (0–1, default: 0.4).
• Gradient — a gradient fill defined by start and end stops (in percent).

Selecting Opacity or Gradient reveals the corresponding fill configuration fields.

The Tooltip value format function customizes how the value of this series is formatted in the chart tooltip, overriding any tooltip format configured at the widget level.

Signature: function(value, latestData): string

The function returns a formatted string.

Examples:

Show the value with a unit:

return value + ' °C';

Show the value with two decimal places and a unit:

return value.toFixed(2) + ' A';