---
title: "Perspective - Linear Scale"
description: "The Linear Scale component displays a series of tick marks and labels."
---

# Perspective - Linear Scale

> The Linear Scale component displays a series of tick marks and labels.

![](2018-12-07_14-21-40linrscle.png)

**Component Palette Icon**:  

![](2019-05-07_9-30-15.png)

## 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](ignition-modules/perspective/working-with-perspective-components/bindings-in-perspective/bindings-in-perspective.md).
This section only documents the Props Category of properties. The other Categories are described on the [Perspective Component Properties](ignition-modules/perspective/working-with-perspective-components/perspective-component-properties.md) 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](#tick-child-properties) properties. | object         |
| minorTicks | Settings for the minor tick marks on the scale. See the [minorTicks](#tick-child-properties) properties.  | object         |
| fineTicks  | Settings for the fine tick marks on the scale. See the [fineTicks](#tick-child-properties) properties. | object         |
| labels     | Displays of the numeric values of major tick marks. Options are as follows: **angle**: Rotation of the numeric labels. Default is 0.	Value is numeric.**style**: Sets a style for the label. Full menu of [style options](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | object         |
| indicators | Markers of special significance that can be placed along the scale. Click [here](perspective-linear-scale.md#indicators-child-properties) 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](appendix/reference-pages/style-reference.md) is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a [style class](ignition-modules/perspective/styles/style-classes/style-classes.md). | 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.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx) | 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.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx)      | 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.](appendix/reference-pages/color-selector-reference/color-selector-reference.mdx)  | 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. Value must be positive. Default is 15.| value: numeric |

## Component Events

The [Perspective Event Types Reference](appendix/reference-pages/perspective-event-types-reference.md) page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The [Component Events and Actions](ignition-modules/perspective/working-with-perspective-components/component-events-and-actions.md) 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

![](2019-02-19_10-29-22-lnsc-ex-m.png)

| 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 |