graph

Sparkline-class chart built on canvas. Bar mode emits N rect commands; line mode emits a single polyline. Y axis auto-ranges from the data unless the caller passes minValue / maxValue. Optional gridlines + axis labels via the shared _axes helper; optional on-hover tooltip pinned to the nearest data point. Plot has the more featureful chart — graph is the cheap visual.

Exports

• graph(data: { number }?, opts: GraphOpts?) -> WidgetNode — build the chart canvas. Empty data arrays render just the background; 1-element arrays render the background (the polyline path needs 2+ points).

Types:

• GraphOpts = { id: string?, classes: (string | { string })?, style: { [string]: any }?, width: number?, height: number?, bg: string?, background: string?, color: string?, graphType: string?, minValue: number?, maxValue: number?, showAxes: boolean?, gridlines: boolean?, tooltip: boolean?, gridColor: string?, axisColor: string?, labelColor: string?, labelSize: number?, xLabels: boolean?, yLabels: boolean?, xTickFormat: any?, yTickFormat: any?, label: string?, app: any? }
• WidgetNode = { [string]: any }

Usage

local Z = require("@builtin::modules.zui")

Z.graph({ 1, 4, 9, 16, 25, 36 })                          -- line, auto-range
Z.graph(samples, { graphType = "bar", color = "#7AA8FF" })
Z.graph(samples, { minValue = 0, maxValue = 1 })
Z.graph(samples, { id = "fps", tooltip = true })          -- hover tooltip
Z.graph(samples, { showAxes = true, gridlines = true })

Notes

• tooltip requires opts.id — the hover handler stashes the active index in ui.widgetState(id, "hover"). The tooltip persists until the next hover; the engine doesn't emit pointer-leave for canvases.
• When showAxes is set, the plot body shrinks to reserve room for tick labels. With axes off, the polyline spans the full canvas height (preserved by the respects explicit minValue/maxValue range test).
• DOM mirror exposes the resulting canvas as <canvas role="img" aria-label="Chart"> via the generic prop pass-through.