Sparkline
A compact, chrome-less trend — line, area or bar — bound to a named query or a tag history. No axes, no legend, no grid: just the shape of the recent past.


Reach for it when you need:
- Inline trend in a KPI tile
- A small "last 24 hours" indicator beside a value
Component name: Sparkline · Category: Chart
In the palette: Compact chrome-less trend (line / area / bar). Bind data to a named query or a tag history.
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
data | array | [{"t":1,"v":5},{"t":2,"v":8},{"t":3,"v":6},{"t":4,"v":11},{"… (truncated) | Array of row objects. Bind to a named query ({{query.MyQuery}}), a tag, or edit inline. Rows map to series via categoryField + seriesFields (auto-derived when empty). |
categoryField | string | "" | Row key for the category/name axis. Empty ⇒ first non-numeric column. |
seriesFields | array | [] | Which columns become series (+ per-series color, and stack/area/renderAs where they apply). Empty ⇒ all numeric columns. |
animation | boolean | true | Enable enter/update animation. |
animationDuration | number | 600 | ms. |
sparkType | enum | area | Options: line · area · bar. |
smooth | boolean | true | — |
fillOpacity | number | 0.3 | — |
enableClick | boolean | true | Fire the Data click event + expose lastClicked. |
lastClicked | object | {} | Output (bind from this): the last-clicked datum — {{ ThisChart.lastClicked.value }}. |
optionOverride | string | "" | Power user: paste a raw JSON object of chart options to deep-merge over the built chart, e.g. {"series":[{"itemStyle":{"color":"#e11"}}]}. Empty = none. |
emptyMessage | string | No data | — |
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
For many instances on one view prefer HMI Sparkline, which stays light when repeated dozens of times.