Perspective - Linear Scale
Component Palette Icon:
Description​
The Linear Scale component displays a series of tick marks and labels that represent a range between a minimum value and a maximum value. It also displays indicators that represent a value or range of values, correctly positioned on the linear scale.
Linear Scale component allows floating point tick marks such as 0.25, 0.5, 0.75, 1.25, etc.
Properties​
Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.
| Name | Description | Property Type |
|---|---|---|
| minValue | The minimum value displayed on the scale. | value: numeric |
| maxValue | The maximum value displayed on the scale. | value: numeric |
| majorTicks | Settings for the major tick marks on the scale. See the majorTicks properties. | object |
| minorTicks | Settings for the minor tick marks on the scale. See the minorTicks properties. | object |
| fineTicks | Settings for the fine tick marks on the scale. See the fineTicks properties. | object |
| labels | Displays of the numeric values of major tick marks. Options are as follows: | object |
| indicators | Markers of special significance that can be placed along the scale. Click here to see the indicators properties. | object |
| mirror | Aligns the scale to the opposite side of the component. Default is false. | value: boolean |
| reverse | Inverts the order of the scale values so min to max is ordered in reverse. Default is false (minimum to max). | value: boolean |
| style | Sets a style for this scale. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class. | object |
Tick Child Properties​
The following child properties apply to majorTicks, minorTicks, and fineTicks.
| Name | Description | Property Type |
|---|---|---|
| span | Distance between each tick mark of this type, in pixels. Default is 20. | value: numeric |
| length | Length of each tick mark, in pixels. Default is 20. | value: numeric |
| color | Color for the major ticks. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color |
| stroke | Width of each tick mark, in pixels. Default is 1. | value: numeric |
indicators Child Properties​
| Name | Description | Property Type |
|---|---|---|
| value | Numeric value along the scale where the indicator is placed or started. | value: numeric |
| label | Text to display with the indicator. Default is "High". | value: string |
| labelColor | Color of the indicator label. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector. | color |
| labelAngle | Rotational angle of the indicator label. | value: numeric |
| color | Color of the indicator or the area making up the indicator. See Color Selector. | color |
| stroke | If indicatorStyle is set to line or wedge, stroke is the width (in pixels) of the indicator. | value: numeric |
| opacity | Opacity of the indicator. 0 is fully transparent, 1 is fully opaque. | value: numeric |
| length | Length of the indicator as measured by its x value within the scale. Default is 25. | value: numeric |
| indicatorStyle | Indicator style can be set to line, wedge, or range. Line is similar to a tick mark. Wedge displays a triangular shape. Range displays a rectangular range along the scale as measured by the property extent. Default is range. | value: string dropdown |
| extent | If indicatorStyle is set to range, this is the extent along the scale that the indicator is placed. Default is 15. | value: numeric |
Component Events​
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.
Example​
| Property | Value |
|---|---|
| props.maxValue | 120 |
| props.minorTicks.span | 10 |
| props.fineTicks.span | 5 |
| props.indicators.0.value | 95 |
| props.indicators.0.color | #D90000 |
| props.indicators.0.extent | 25 |
| props.indicators.1.value | 00 |
| props.indicators.1.indicatorStyle | range |
| props.indicators.1.color | #D9D900 |
| props.indicators.1.extent | 20 |
| props.indicators.2.value | 74 |
| props.indicators.2.indicatorStyle | wedge |
| props.indicators.2.color | #0000D9 |