Angular RangeSelector - value

The selected range (initial or current). Equals the entire scale when not set.

Selector: dxo-value
Type:

Array<Number | String | Date>

|

Object

Raised Events: onValueChanged
Cannot be used in themes.

This property accepts one of the following:

  • A two-item array

    Specifies the range's start and end. The array can contain a pair of numeric, string, or date-time values, depending on the scale's valueType. You can also set one of the array values to null to specify an open-ended range.

    value: [50, 70]
    // Open-ended range
    value: [null, 70]
  • An object with the startValue and endValue fields

    An alternative to the two-item array.

    value: {
        startValue: 50,
        endValue: 70
    }
    // Open-ended range
    value: {
        startValue: null,
        endValue: 70
    }
  • An object with the length and a startValue or endValue field

    Specifies the range using a start or end value and length.

    value: {
        startValue: 50,
        length: 20
    }
    // ===== or =====
    value: {
        endValue: 70,
        length: 20
    }
  • An object with the length field

    Sets the range of the specified length using the last scale value as the end value.

    value: {
        length: 20
    }
See Also

endValue

The range's end value.

Type:

Number

|

Date

|

String

| undefined
Default Value: undefined
Raised Events: onOptionChanged

length

The range's length.

Selector: dxo-length
Type:

Number

|

Object

|

TimeInterval

| undefined
Default Value: undefined

If the axis/scale displays numbers, set this property to a number:

length: 100 // a hundred axis/scale values

If the axis/scale displays date-time values, set it to an accepted string value or object that contains a field described further in this section:

length: 'day' // one day
length: { days: 2 } // two days

startValue

The range's start value.

Type:

Number

|

Date

|

String

| undefined
Default Value: undefined
Raised Events: onOptionChanged