Advanced Data Key Configuration

Data key configuration controls how an individual key is fetched, processed, and displayed in a widget. It consists of two tabs: General — data source settings — and Advanced — column or series appearance settings.

To open data key configuration, click the pencil icon next to any key in the widget datasource configuration.

Available for all widget types. Defines how the raw data value is fetched and prepared.

• Key — the telemetry or attribute key to read from the entity.
• Label — the display name shown in the widget (defaults to the key name).

Sets the unit suffix displayed next to the value. Click the field to open the Unit settings dialog for automatic 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.

Controls how multiple datapoints within a time window are reduced to a single value.

When enabled, reads the most recent value regardless of the selected 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.

A JavaScript function applied to each datapoint after it is received from the server. Use it to transform, scale, or reformat values before display.

Toggle Use data post-processing function and write the function body.

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

Returns a primitive value (number, string, or boolean).

Examples:

Multiply all values by 10:

return value * 10;

Round to whole numbers:

return Math.round(value);

Relative change between consecutive datapoints:

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

Format as date/time:

if (value) {
  return moment(value).format('DD/MM/YYYY HH:mm:ss');
}
return '';

Applies to the Alarms table widget and widgets in the Tables and Entity widgets bundles.

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

Sets the column width in pixels (e.g. 200px) or as a percentage (e.g. 20%). Leave empty for automatic width.

Controls the column’s initial visibility state:

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

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

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

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

Applies custom CSS styles to the cell based on its value. Toggle the setting and write a JavaScript function.

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

Returns a CSS key/value object.

Examples:

Set font weight and color:

return {
  color: 'rgb(0, 112, 214)',
  fontWeight: 600
};

Color based on temperature:

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

Replaces the default cell content with custom HTML. Toggle the setting and write a JavaScript function.

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

Parameters are the same as for the cell style function. Returns an HTML string rendered inside the cell.

Examples:

Format timestamp:

var createdTime = value;
return createdTime ? ctx.date.transform(createdTime, 'yyyy-MM-dd HH:mm:ss') : '';

Styled badge for device type:

var deviceType = value;
var color = '#AADdD8';
switch (deviceType) {
  case 'thermostat': color = 'orange'; break;
  case 'default': color = '#AADdD8'; break;
}
return '<div style="border: 2px solid #007F2F; border-radius: 10px; padding: 3px; ' +
  'background-color: ' + color + '; text-align: center;">' + deviceType + '</div>';

Boolean as colored circle:

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

Applies to chart widgets such as Time series chart, Bar chart with labels, and similar.

• 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 widget settings to display a separate scale for this series.

Toggle between Line and Bar to change how the series is rendered.

Controls line appearance. Available when Series type is Line and Show line is enabled.

• Show line — toggles line rendering on or off.
• Step line — renders the line as a step function. Choose the step alignment:
  • Start — step occurs at the beginning of the interval.
  • Middle — step occurs at the midpoint.
  • End — step occurs at the end of the interval.
• 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).

• Show points — displays individual data point markers on the line.

When enabled:

• Point label — shows the data value next to each marker. Configure position (Top or Bottom), font settings, and label color.
• Point label background — adds a colored background behind the label.
• Point shape — marker shape: Empty circle, Circle, Rectangle, Rounded rectangle, Triangle, Diamond, Pin, Arrow, or None.
• Point size — marker size in pixels (default: 4).

Fills the area between the series line and the bottom of the chart. Three modes:

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

Customizes how the value is formatted in the chart tooltip for this specific series, overriding any tooltip format configured at the widget level.

Signature: function(value, labelData): string

Returns a formatted string.

Examples:

Show value in Celsius:

return value + ' °C';

Show value with 2 decimal places and unit:

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

Number with thousands separator:

function numberWithCommas(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}
return value ? numberWithCommas((value / 1).toFixed(1)) + ' ' : '';