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.