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 | The clicked datum, under point. |
dataDblClick | Data double click | Chart | The clicked datum, under 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.