HMI Trend
A high-performance-HMI embedded trend: the Y-axis is the operating range, a band shows the desired range, dashed lines mark the alarm limits, and the trace stays neutral until it leaves the desired band. An operator reads deviation at a glance without reading numbers.
Reach for it when you need:
- The trend beside a controlled value on a process screen
- Any place where "is this normal?" matters more than "what is the value?"
Component name: HmiTrendChart · Category: Chart
In the palette: HP HMI embedded trend: operating-range Y-axis, desired-range band + dashed alarm limits, neutral line that colours only on excursion
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, pulls the trailing window of history; leave empty to use the bound data. |
window | enum | 3600 | Trailing time window of history to draw (only used when tagPath is set). Options: 300 · 900 · 3600 · 21600 · 43200 · 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 to the widget width. |
yMin | number | "" | Fixed Y minimum (blank = auto operating-range). |
yMax | number | "" | Fixed Y maximum (blank = auto operating-range). |
desiredLo | number | 73 | Bottom of the desired-range back-band. |
desiredHi | number | 77 | — |
loAlarm | number | 72 | Low alarm (L) — dashed warn line. |
hiAlarm | number | 78 | — |
loloAlarm | number | 71 | Low-low alarm (LL) — dashed crit line. |
hihiAlarm | number | 79 | — |
unit | string | % | — |
lineColor | color | #3d6fa5 | Trend line — a muted, neutral blue (HP HMI: never a bright/alarm hue; emphasis is by thickness, not colour). Colours to warn/crit only on excursion. |
lineWidth | number | 1.75 | — |
warnColor | color | #f57c00 | — |
critColor | color | #d32f2f | — |
bandColor | color | #b8daff | Desired-range back-band — solid pale blue, SHARED with the MAI/Sparkline (green is reserved: it conditions "all clear"). |
showBand | boolean | true | — |
showLimitLines | boolean | true | — |
showGrid | boolean | true | — |
gridCols | number | 4 | Interior vertical time divisions. |
showScale | boolean | true | Show the Y-axis min / max labels. |
scaleFontSize | number | 10 | — |
decimals | number | 1 | Fraction digits shown. 1.0.4 |
scaleColor | color | var(--widget-label) | — |
strokeColor | color | currentColor | Axis frame + gridline colour. Default currentColor matches the drawn SVG line colour (light + dark). |
showWindowLabel | boolean | true | Show the trailing-window label (e.g. "12 h"). Tag-history mode only. |
windowLabelColor | color | var(--widget-label) | — |
windowLabelSize | number | 13 | — |
label | string | Trend | — |
enableLabel | boolean | true | — |
labelColor | color | var(--widget-label) | — |
labelSize | number | 11 | — |
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. |
dataClick | Data click | Chart | context.point — the clicked data point. |
dataDblClick | Data double click | Chart | context.point — the clicked data point. |
legendSelect | Legend toggle | Chart | The toggled series. |
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
The neutral-until-excursion colouring is the point of this component. Do not override it to colour by series — that reintroduces exactly the visual noise the HP HMI convention removes.
The readout beside the trace shows one decimal place by default; decimals (0–6) sets how many. It formats through the same helper as the Gauge, the Tank and the Moving Analog Indicator, so a screen showing one tag in several of them cannot show it to different precision in each.
What the trace draws. Changed in 1.0.8 The trend now draws against real time: each sample sits at its timestamp on the window, so sparse booleans, holes and the live edge keep a true time scale. History is fetched as M4 with one slot per pixel column of the widget, so a one-sample spike survives at any width and a small widget no longer fetches points it cannot show. Booleans, and integers whose tag is set to step, are held flat until they change; the line breaks only where samples are further apart than a few logging intervals. Strokes sit at the samples' own times, with no stair-steps. Quality is shown: stretches where the tag was not Good are shaded, including a window that was Bad throughout, which used to draw nothing at all. A Bad reading breaks the live edge instead of drawing a dip. The forming slot — the newest data, not yet closed into a slot — is drawn as a dashed segment from the last closed one, so the right edge is never up to a whole slot behind. A bound data array is unaffected: it still draws by index.
Many trends on one screen. Changed in 1.0.8 HMI trends and sparklines that mount together on one window share a single historian request (up to 32 tags each), instead of one request per widget. A trend in a background browser tab still loads its history.