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. |
↳ axis.show | boolean | true | Draw the baseline the ticks hang off. |
↳ axis.color | color | var(--widget-scale) | — |
↳ axis.stroke | number | 1 | — |
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. |
↳ majorTicks.interval | number | 20 | Distance between major ticks, in value units. |
↳ majorTicks.length | number | 12 | — |
↳ majorTicks.color | color | var(--widget-scale) | — |
↳ majorTicks.stroke | number | 1.5 | — |
minorTicks | object | {"perMajor":4,"length":7,"color":"var(--widget-scale)","stro… (truncated) | Unlabelled ticks subdividing each major interval. |
↳ minorTicks.perMajor | number | 4 | Minor ticks per major interval. 0 or 1 turns them off. |
↳ minorTicks.length | number | 7 | — |
↳ minorTicks.color | color | var(--widget-scale) | — |
↳ minorTicks.stroke | number | 1 | — |
fineTicks | object | {"perMinor":0,"length":4,"color":"var(--widget-scale)","stro… (truncated) | The finest tier, subdividing each minor tick. |
↳ fineTicks.perMinor | number | 0 | Fine ticks per minor tick. 0 or 1 turns them off. |
↳ fineTicks.length | number | 4 | — |
↳ fineTicks.color | color | var(--widget-scale) | — |
↳ fineTicks.stroke | number | 0.75 | — |
labels | object | {"show":true,"decimals":0,"unit":"","angle":0,"color":"var(-… (truncated) | The numbers printed under the major ticks. |
↳ labels.show | boolean | true | Show the number under each major tick. |
↳ labels.decimals | number | 0 | — |
↳ labels.unit | string | "" | Appended to each number — tight for symbols (%, °), spaced otherwise. |
↳ labels.angle | number | 0 | Rotation of the numbers, in degrees. |
↳ labels.color | color | var(--widget-scale) | — |
↳ labels.size | number | 9 | — |
pointer | object | {"show":true,"style":"wedge","placement":"outside","length":… (truncated) | The marker that tracks the live value. |
↳ pointer.show | boolean | true | Draw a marker at value. |
↳ pointer.style | enum | wedge | Options: wedge · line. |
↳ pointer.placement | enum | outside | Inside puts the pointer on the same side as the tick marks; outside puts it on the opposite side. Options: outside · inside. |
↳ pointer.length | number | 14 | — |
↳ pointer.color | color | hsl(43 96% 56%) | — |
↳ pointer.stroke | number | 2 | — |
↳ pointer.showLabel | boolean | true | Print the numeric value at the pointer. |
↳ pointer.labelColor | color | var(--widget-value) | — |
↳ pointer.labelSize | number | 10 | — |
↳ pointer.labelDirection | enum | auto | Auto turns the readout 90° on a vertical scale, keeping its lane narrow, and leaves it flat on a horizontal one. Options: auto · horizontal · vertical. |
title | object | {"show":true,"text":"Linear Scale","color":"var(--widget-lab… (truncated) | Caption in the strip below the scale. |
↳ title.show | boolean | true | — |
↳ title.text | string | Linear Scale | — |
↳ title.color | color | var(--widget-label) | — |
↳ title.size | number | 11 | — |
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 }. |
↳ indicators.value | number | 50 | — |
↳ indicators.label | string | "" | — |
↳ indicators.indicatorStyle | enum | wedge | Options: wedge · line · range. |
↳ indicators.placement | enum | outside | Where this indicator sits relative to the tick marks. For a range band this moves the LABEL only — the band itself always stays on the scale. Options: outside · inside. |
↳ indicators.length | number | 14 | — |
↳ indicators.extent | number | 10 | — |
↳ indicators.stroke | number | 2 | — |
↳ indicators.color | color | #3b82f6 | — |
↳ indicators.opacity | number | 1 | — |
↳ indicators.labelColor | color | var(--widget-label) | — |
↳ indicators.labelSize | number | 9 | — |
↳ indicators.labelDirection | enum | auto | Auto turns the label 90° on a vertical scale so its lane stays narrow, and leaves it flat on a horizontal one. Options: auto · horizontal · vertical. |
↳ indicators.labelAngle | number | 0 | — |
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.