Linear Scale
A ruler-style scale with tick marks, numeric labels, indicators and a live pointer. A linear alternative to a gauge, and much easier to stack in a column of related values.
Reach for it when you need:
- Several related values shown side by side at the same scale
Component name: LinearScale · Category: Display
In the palette: Ruler-style scale — tick marks, numeric labels, indicators and a live pointer
Properties
Any property can be bound to a tag, another component's property, or a query.
| Property | Type | Default | Description |
|---|---|---|---|
value | number | 50 | Live value marked by the pointer — bind this to a tag. |
minValue | number | 0 | — |
maxValue | number | 100 | — |
orientation | enum | vertical | Lay the scale out along the Y or the X axis. A vertical scale reads minValue at the BOTTOM. Options: vertical · horizontal. |
tickSide | enum | end | Which side of the axis line the tick marks and their numbers sit on. Options: end · start. |
reverse | boolean | false | Invert the order of the values so the scale runs max → min. |
axis | object | {"show":true,"color":"var(--widget-scale)","stroke":1} | The baseline the ticks hang off. |
majorTicks | object | {"interval":20,"length":12,"color":"var(--widget-scale)","st… (truncated) | The labelled ticks. interval is in VALUE units, so the tick count survives a resize. |
minorTicks | object | {"perMajor":4,"length":7,"color":"var(--widget-scale)","stro… (truncated) | Unlabelled ticks subdividing each major interval. |
fineTicks | object | {"perMinor":0,"length":4,"color":"var(--widget-scale)","stro… (truncated) | The finest tier, subdividing each minor tick. |
labels | object | {"show":true,"decimals":0,"unit":"","angle":0,"color":"var(-… (truncated) | The numbers printed under the major ticks. |
pointer | object | {"show":true,"style":"wedge","placement":"outside","length":… (truncated) | The marker that tracks the live value. |
title | object | {"show":true,"text":"Linear Scale","color":"var(--widget-lab… (truncated) | Caption in the strip below the scale. |
indicators | array | [] | Fixed marks on the scale. Each item: { value, label, indicatorStyle: 'wedge'|'line'|'range', placement: 'inside'|'outside' (inside = overlaid on the tick marks, outside = the opposite side; for a range band this moves the LABEL only, the band always stays on the scale), length, extent (range style only, in value units), stroke (line style only), color, opacity, labelColor, labelSize, labelDirection: 'auto'|'horizontal'|'vertical', labelAngle }. |
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. |
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.