Point Chart

• Each data record appears as an individual dot positioned by timestamp and value.
• Real-time and history modes with configurable time window and optional data aggregation.
• Comparison overlay: plot the same series from a previous period (yesterday, last week, etc.) alongside current data.
• Configurable thresholds as horizontal reference lines with labels and custom styles.
• Legend with per-series statistics: min, max, average, total, and latest.
• Customizable point styles: shape, size, label, and fill color per series.
• Data zoom for inspecting narrow time ranges without changing the dashboard time window.

1. Open the dashboard in edit mode. Click Add widget in the top toolbar, or click the Add new widget icon in the center of an empty dashboard.
2. In the widget bundle selection dialog, find and click Charts.
3. Select the Point chart widget.
4. Configure the datasource, series, and appearance, then click Add.

All settings in this section use Basic mode — a quick-start configuration covering the essentials. For finer widget controls like custom tooltip functions and advanced axis formatting, switch to the Advanced tab.

The Basic tab groups settings into: Time window, Datasource, Series, Y axes, Thresholds, Appearance, Chart, X axis, Legend, Tooltip, Animation, and Card appearance.

Define the time interval to display, like Last 12 hours or Current day. Enable data aggregation to reduce the number of visible points by summarizing them over intervals, like hourly averages. Learn more in the Time window guide.

Select the source of telemetry data:

• Device — a specific device; shows each recorded telemetry value as a dot over the configured time range.
• Entity alias — a set of entities matched by an entity alias; use this to compare data points from multiple devices on the same chart.

The widget supports two display modes: Series and Comparison.

Each data key is rendered as a set of individual dots along the time axis. Each dot represents a single telemetry value at a specific timestamp. Add a key for each telemetry value to display, like temperature or humidity.

Click the settings icon on a series row to open the Data key configuration dialog with General and Advanced tabs.

General tab:

Setting	Description
Key	Telemetry or attribute key name.
Label	Legend label for this series.
Units	Unit suffix, like °C or %.
Decimals	Decimal places for displayed values.
Color	Point color.
Use data post-processing function	Optional JavaScript transform applied to the raw value before display. Signature: f(value, latestData).

Advanced tab — Legend:

Setting	Description
Show in legend	Include this series in the chart legend.
Hidden by default	Series is rendered but hidden in the legend until toggled by the user.

Advanced tab — Y axis: Select which Y axis this series is plotted against.

Advanced tab — Point settings:

Setting	Description
Show points	Render a marker at each data point.
Point label	Display the value as a label above or below the point. Configure label position and font.
Point label background	Show a background behind point labels.
Point shape	Marker shape: Empty circle, Rectangle, Diamond, etc.
Point size	Marker diameter in pixels.

Advanced tab — Tooltip value format function: Optional JavaScript function f(value, latestData) to format the value shown in the hover tooltip for this series.

Advanced tab — Comparison settings: Enable Show historical data for comparison to plot comparison dots from a previous time period alongside this series. Configure Comparison key label (auto or custom) and Comparison data color.

In Comparison mode, the widget overlays the same data keys from a previous time period on top of the current data — for example, today vs. yesterday or this week vs. last week. Each period is rendered as a separate set of dots, making it easy to spot changes or anomalies across intervals.

Switch to the Comparison tab in the Series section to enable this mode. Each comparison entry has an interval dropdown, an X axis button, and a list of data keys (Show, Key, Label, Color).

Comparison interval options:

Option	Description
Previous interval (default)	Shifts the time window back by one full interval length.
Day ago	Compares with the same period from 24 hours earlier.
Week ago	Compares with the same period from 7 days earlier.
Month ago	Compares with the same period from one month earlier.
Year ago	Compares with the same period from one year earlier.
Custom interval	Enter a custom offset in milliseconds.

Comparison X axis settings — click the X axis button to configure how the comparison time axis is displayed:

Setting	Description
Show	Display the comparison X axis on the chart.
Label	Text label for the comparison axis.
Position	Top or Bottom.
Tick labels	Show date/time labels on ticks. Configure font and color.
Show ticks	Render tick marks on the axis.
Show line	Render the axis baseline.
Show split lines	Render vertical grid lines for each tick.

Configure one or more Y axes to control vertical scaling and labeling. Each series can be assigned to a different axis via its Y axis field in the series settings. Click Add Y axis to add a new axis.

Each axis row shows the following columns:

Column	Description
Id	Unique identifier used to assign series to this axis.
Show	Toggle axis visibility on the chart.
Label	Text label shown next to the axis.
Position	Left or Right.
Min / Max	Fixed scale bounds. Leave empty for auto-scaling.
Units	Unit suffix for axis tick labels.
Decimals	Decimal places for tick label values.

Click the settings icon on an axis row to open the Y axis settings dialog:

Setting	Description
Label	Text label with configurable font and color.
Tick labels	Show value labels on each tick. Configure font and color.
Show ticks	Render tick marks on the axis line.
Show line	Render the axis baseline.
Show split lines	Render horizontal grid lines across the chart for each tick.
Ticks interval	Interval between ticks. Auto derives it from the data range.
Split number	Suggested number of tick intervals. Auto lets the chart decide.

Scale limits — set explicit minimum and maximum bounds for the axis scale. Each bound has a Source:

Source	Description
Constant	Fixed numeric value entered directly.
Key	Value taken from a telemetry or attribute key of the current entity.
Entity	Value taken from a specified entity’s attribute or telemetry key.

Add horizontal reference lines to mark safe, warning, or critical levels. Click Add threshold to add a row.

Column	Description
Source	Constant — a fixed numeric value. Entity — value pulled from an entity attribute or telemetry key.
Key / Value	The numeric value (Constant) or the attribute/telemetry key name (Entity).
Y axis	Which Y axis the threshold is drawn against.
Color	Threshold line color.
Units	Unit suffix displayed in the threshold label.
Decimals	Decimal places for the threshold label value.

Click the settings icon on a threshold row to open the Threshold settings dialog:

Setting	Description
Label	Toggle to show a text label on the threshold line. Set position: Start, Middle, End, Inside start, Inside start top, or Inside start bottom. Configure font and color.
Label background	Show a filled background behind the label text.
Line color	Color of the threshold line.
Line type	Dash style: Solid, Dashed, or Dotted.
Line width	Stroke width in pixels.
Start symbol	Marker at the left end of the line, like None or Arrow. Set symbol size.
End symbol	Marker at the right end of the line, like None or Arrow. Set symbol size.

Controls the chart title displayed in the widget header.

Setting	Description
Title	Text shown in the widget header. Configure font, size, weight, and color.
Card icon	Optional icon displayed next to the title.

Controls interactive behavior and chart area layout.

Setting	Description
Data zoom	Enable horizontal zoom for inspecting narrow time ranges without changing the dashboard time window.
Grid	Adjust padding inside the chart area.
Stack mode	Accumulate multiple series on the same axis, useful for showing contribution totals.

Configure the horizontal time axis. Use the Show toggle to hide the axis entirely.

Setting	Description
Label	Text label displayed along the axis. Configure font and color.
Position	Bottom or Top.
Tick labels	Show date/time labels on each tick. Configure date format, font, and color.
Show ticks	Render tick marks on the axis. Configure color.
Show line	Render the axis baseline. Configure color.
Show split lines	Render vertical grid lines across the chart for each tick.

Use the master toggle to show or hide the legend entirely.

Setting	Description
Position	Legend placement: Top, Bottom, Left, or Right.
Show values	Statistics displayed per series: Min, Max, Average, Total, Latest. Multiple values can be enabled simultaneously.
Label	Font and color for series name labels.
Value	Font and color for statistic values.
Column title	Font and color for the column header row (visible when Show values is enabled).
Sort datakeys in legend	Sort series entries alphabetically.

Use the master toggle to show or hide the tooltip entirely.

Setting	Description
Trigger	Point — hover over a data point; Axis — hover anywhere on the chart shows values for all series at that timestamp.
Date	Toggle to show the timestamp. Select the date format and configure font and color.
Show date time interval	Display the time interval range in the tooltip header.
Hide zero values	Suppress series entries with a value of zero from the tooltip.
Show total value in stack mode	Show the summed total of all series when Stack mode is enabled.
Label	Font and color for series name labels in the tooltip.
Value	Font and color for value text in the tooltip.
Background color	Tooltip background fill color.
Background blur	Blur radius (px) applied to the tooltip background.

Use the master toggle to enable or disable chart animation. When enabled:

Setting	Description
Animation threshold	If the number of data points exceeds this value (default 2000), animation is disabled to maintain performance.
Animation duration	Duration of the initial load animation in milliseconds (default 500 ms).
Animation easing	Easing function for the initial animation, like cubicOut.
Animation delay	Delay before the initial animation starts, in milliseconds.
Update animation duration	Duration of the animation when data updates arrive (default 300 ms).
Update animation easing	Easing function for update animations.
Update animation delay	Delay before update animations start, in milliseconds.

Setting	Description
Background	Solid color or image background for the card.
Show card buttons	Enable Fullscreen and Data export toolbar buttons.
Card border radius	Corner rounding in pixels.
Card padding	Spacing between content and card border.

The Point chart supports the Widget header button action — a button placed in the widget header that triggers a configured action when clicked.

Goal: Display all recorded temperature readings from a Smart Device for the last 12 hours as individual dots, with a red threshold line at 28 °C to highlight elevated values.

Prerequisites: A device named Smart Device that sends temperature (°C) as a telemetry key.

Step 1. Add the widget. Open your dashboard in edit mode, click Add widget, select the Charts bundle, then choose Point chart.

Step 2. Configure the time window. Set Period to Realtime — last 12 hours. Leave Aggregation set to None to display every recorded data point.

Step 3. Configure the datasource. Set Datasource type to Device, then select Smart Device.

Step 4. Add a series. In the Series section, add one data key:

Key	Label	Y axis	Color	Units	Decimals
temperature	Temperature	default	#4256F1	°C	1

Step 5. Configure Y axes. Set the default axis:

ID	Label	Position	Units	Decimals
default	Temperature, °C	Left	°C	0

Step 6. Add a threshold. Click Add threshold and configure:

Source	Value	Y axis	Color	Units	Decimals
Constant	28	default	#F44336	°C	0

Open the threshold settings icon and configure the label: Position — Start, Color — #FFFFFF. Enable Label background and set its color to #F44336.

Step 7. Configure appearance and legend. In the Appearance section set Title to Temperature Point Chart, font size 18 px, weight 600. In the Legend section set Position to Top and enable Min, Max, Average.

Step 8. Configure tooltip. Disable Show date time interval to keep the tooltip compact.

Step 9. Save. Click Add, resize and reposition as needed, then click Save on the dashboard toolbar.

Result: The chart displays each temperature reading as a blue dot. The red threshold line at 28 °C makes it easy to spot elevated readings at a glance. The legend shows min/max/avg statistics; the tooltip shows the exact value and timestamp for any hovered dot.

Widget Shows No Data

Cause	Solution
Wrong data key name	Confirm the key name matches the telemetry key sent by the device. Key names are case-sensitive.
Incorrect datasource or entity alias	Verify the correct Device or Entity alias is selected. Open Entity aliases to confirm the alias resolves to results.
Device not sending data	Open Devices → Latest telemetry and check for recent values. If empty, verify the device transport configuration and access token.
No telemetry in the selected time window	Extend the time range or switch to Realtime mode to confirm data exists.
Rule chain misconfiguration	Check that the Rule Chain has a Save time series node routing device telemetry to the database.
Datasource updated after import	After importing a widget, update the datasource to point to your device and update data key names to match your device’s actual telemetry keys.

Too Many or Too Few Points Visible

Cause	Solution
Aggregation enabled	If individual data points are expected but only summaries appear, set Aggregation to None in the time window settings.
Time window too narrow	Extend the time range to include the expected data.
Browser time zone mismatch	Ensure the dashboard and device use the same time zone.

A Series Does Not Appear on the Chart

Cause	Solution
Data key not added	Open the Series section and confirm the telemetry key is added as a data key row.
Series hidden by default	Open the data key’s Advanced settings and disable Hidden by default.
Wrong Y axis assignment	Check that the series is assigned to an existing Y axis ID.