Sparkline

A tiny inline line chart that accumulates synced values over time. Read-only.

Type

"sparkline"

Relevant Fields

Inherits all Control Definition. Key fields:

Field	Type	Default	Description
`sparklinePoints`	int	`50`	Max data points retained in the buffer
`sparklineFill`	bool	`false`	Fill the area under the line with a gradient
`tint`	string	`"#667eea"`	Line and fill color
`label`	string	—	Header label (also shows latest value)

Data Flow

Unlike other controls that store a single value, sparklines maintain a ring buffer of numeric values in AppState.sparklineBuffers. Each synced value is appended to the buffer. When the buffer exceeds sparklinePoints, the oldest value is dropped.

The sparkline renders all points in the buffer as a line path, auto-scaling Y to the min/max of the current buffer.

Examples

Temperature history

{
  "type": "sparkline",
  "id": "temp-history",
  "position": [0, 0],
  "span": [1, 3],
  "sparklinePoints": 100,
  "sparklineFill": true,
  "tint": "#FF6B6B",
  "label": "Temperature",
  "sync": [{ "method": "meshsocket", "type": "listen", "event": "broadcast", "filter": { "room": "living" }, "valuePath": "temperature" }]
}

Compact sparkline (no label, no fill)

{
  "type": "sparkline",
  "id": "cpu-load",
  "position": [0, 2],
  "sparklinePoints": 30,
  "tint": "#34C759",
  "hideLabel": true,
  "sync": [{ "method": "meshsocket", "type": "listen", "event": "broadcast", "filter": { "device": "server" }, "valuePath": "cpu_load" }]
}

Behavior

New data points animate in smoothly
The Y axis auto-scales to the min/max of current buffer data
When fewer than 2 points exist, shows a "--" placeholder
The latest value is shown in the header (right side) with animated numeric transition

Control Definition — Base fields
Sync — How values are received
Gauge — Often paired with sparklines in long-press detail views