HMI Sparkline
A small inline trend with an optional desired-range band, light enough to repeat many times on one view — one beside every value in a table of forty tags.
Reach for it when you need:
- A trend beside each row of an equipment list
- Recent context next to a numeric readout, where a full chart would not fit
Component name: HmiSparkline · Category: Chart
In the palette: Lightweight inline trend with an optional desired-range band; light enough to repeat many times per view
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
tagPath | tag | "" | Historized tag to trend — pick from the selector (history-enabled tags only). When set, the sparkline pulls the trailing window of that tag's history (blank until it resolves); leave empty to use the bound data instead. |
window | enum | 300 | Trailing time window of history to draw (only used when tagPath is set). Options: 60 · 300 · 900 · 3600 · 21600 · 86400. |
data | any | — | Fallback series values when no tagPath is bound — bind to a named query, or leave blank for the sample trend. Auto-decimated (min/max) to the widget width. |
showWindowLabel | boolean | true | Show the trailing-window label (e.g. "5 min") in the corner. Tag-history mode only. |
windowLabelColor | color | var(--widget-label) | — |
windowLabelSize | number | 12 | — |
desiredLo | number | 35 | Bottom of the desired-range back-band (blank = no band). |
desiredHi | number | 65 | — |
yMin | number | "" | Fixed Y minimum (blank = auto-range). |
yMax | number | "" | Fixed Y maximum (blank = auto-range). |
lineColor | color | #64748b | — |
lineWidth | number | 1.5 | — |
bandColor | color | #b8daff | Desired-range back-band colour — a solid pale blue, SHARED with the MAI desired band (green is reserved — it conditions "all clear"). |
showDot | boolean | true | — |
dotColor | color | var(--widget-value) | — |
alarmColor | color | #f57c00 | Dot colour when the last value leaves the desired band. |
style | style | {} | Custom CSS properties |
Events
Attach event actions to these in the Event Manager.
| Event | Label | Group | Payload |
|---|---|---|---|
click | Click | Mouse | The DOM event. |
dblclick | Double click | Mouse | The DOM event. |
contextmenu | Right click | Mouse | The DOM event. |
mouseenter | Mouse enter | Mouse | The DOM event. |
mouseleave | Mouse leave | Mouse | The DOM event. |
contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.
Notes
Choose this over Sparkline when you need many instances on one screen; choose Sparkline when you need its bar or area variants on a handful.
What the trace draws. Changed in 1.0.8 Like the HMI Trend, the sparkline is placed on real time, fetched as M4 at one slot per pixel column (a one-sample spike survives), holds booleans flat, and draws strokes at the samples' own times. Stretches that were not Good are shaded, at least one pixel wide, so a brief fault on a long window still shows. Bad readings are left out of the live tail. Sparklines mounted together share one historian request (up to 32 tags), which is what keeps forty of them on one screen cheap.