Skip to main content
Version: Next

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.

The Sparkline component as it renders with its default settings.The Sparkline component as it renders with its default settings.

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.

PropertyTypeDefaultDescription
dataarray[{"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).
categoryFieldstring""Row key for the category/name axis. Empty ⇒ first non-numeric column.
seriesFieldsarray[]Which columns become series (+ per-series color, and stack/area/renderAs where they apply). Empty ⇒ all numeric columns.
animationbooleantrueEnable enter/update animation.
animationDurationnumber600ms.
sparkTypeenumareaOptions: line · area · bar.
smoothbooleantrue
fillOpacitynumber0.3
enableClickbooleantrueFire the Data click event + expose lastClicked.
lastClickedobject{}Output (bind from this): the last-clicked datum — {{ ThisChart.lastClicked.value }}.
optionOverridestring""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.
emptyMessagestringNo data
stylestyle{}Custom CSS properties

Events

Attach event actions to these in the Event Manager.

EventLabelGroupPayload
clickClickMouseThe DOM event.
dblclickDouble clickMouseThe DOM event.
contextmenuRight clickMouseThe DOM event.
mouseenterMouse enterMouseThe DOM event.
mouseleaveMouse leaveMouseThe DOM event.
dataClickData clickChartThe clicked datum, under point.
dataDblClickData double clickChartThe clicked datum, under point.
legendSelectLegend toggleChartThe toggled series.
Right-click behaves differently in the Designer

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.