Box
API
Map

JavaScript/jQuery Chart - valueAxis.wholeRange

Defines the range where the axis can be zoomed and panned. To limit the visual range, specify the visualRange property.

Type:

Object

|

Array<Number | String | Date>

Default Value: undefined

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 axis's valueType. You can also set one of the array values to null to specify an open-ended range.

    jQuery
    index.js
    $(#chart).dxChart({
        valueAxis: {
            wholeRange: [50, 70]
        }
    })
    // Open-ended range
    $(#chart).dxChart({
        valueAxis: {
            wholeRange: [null, 70]
        }
    })
    Angular
    app.component.html
    <dx-chart>
        <dxo-value-axis [wholeRange]="[50, 70]" ></dxo-value-axis>
    </dx-chart>
    <!-- Open-ended range -->
    <dx-chart>
        <dxo-value-axis [wholeRange]="[null, 70]" ></dxo-value-axis>
    </dx-chart>
    Vue
    App.vue
    <DxChart>
        <DxValueAxis :wholeRange="[50, 70]" />
    </DxChart>
    <!-- Open-ended range -->
    <DxChart>
        <DxValueAxis :wholeRange="[null, 70]" />
    </DxChart>
    React
    App.tsx
    <Chart>
        <ValueAxis wholeRange={[50, 70]} />
    </Chart>
    <!-- Open-ended range -->
    <Chart>
        <ValueAxis wholeRange={[null, 70]} />
    </Chart>
  • An object with the startValue and endValue fields

    An alternative to the two-item array.

    jQuery
    index.js
    $(#chart).dxChart({
        valueAxis: {
            wholeRange: { startValue: 50, endValue: 70 }
        }
    })
    // Open-ended range
    $(#chart).dxChart({
        valueAxis: {
            wholeRange: { startValue: null, endValue: 70 }
        }
    })
    Angular
    app.component.html
    <dx-chart>
        <dxo-value-axis [wholeRange]="{ startValue: 50, endValue: 70 }" ></dxo-value-axis>
    </dx-chart>
    <!-- Open-ended range -->
    <dx-chart>
        <dxo-value-axis [wholeRange]="{ startValue: null, endValue: 70 }" ></dxo-value-axis>
    </dx-chart>
    Vue

    The following code snippet demonstrates wholeRange defined as a <DxValueAxis> attribute:

    App.vue
    <DxChart>
        <DxValueAxis :wholeRange="{ startValue: null, endValue: 70 }" />
    </DxChart>
    <!-- Open-ended range -->
    <DxChart>
        <DxValueAxis :wholeRange="{ startValue: null, endValue: 70 }" />
    </DxChart>

    The following code snippet demonstrates wholeRange defined as a <DxWholeRange> selector:

    <DxChart>
        <DxValueAxis>
            <DxWholeRange startValue="50" endValue="70" />
        </DxValueAxis>
    </DxChart>
    <!-- Open-ended range -->
    <DxChart>
        <DxValueAxis>
            <DxWholeRange :startValue="null" endValue="70" />
        </DxValueAxis>
    </DxChart>
    React

    The following code snippet demonstrates wholeRange defined as a <ValueAxis> attribute:

    App.tsx
    <Chart>
        <ValueAxis wholeRange={{ startValue: null, endValue: 70 }} />
    </Chart>
    <!-- Open-ended range -->
    <Chart>
        <ValueAxis wholeRange={{ startValue: null, endValue: 70 }} />
    </Chart>

    The following code snippet demonstrates wholeRange defined as a <WholeRange> selector:

    <Chart>
        <ValueAxis>
            <WholeRange startValue="50" endValue="70" />
        </ValueAxis>
    </Chart>
    <!-- Open-ended range -->
    <Chart>
        <ValueAxis>
            <WholeRange startValue={null} endValue="70" />
        </ValueAxis>
    </Chart>
  • An object with the length and startValue or endValue

    Specifies the range using length and start or end values.

    jQuery
    index.js
    $(#chart).dxChart({
        valueAxis: {
            wholeRange: { startValue: 50, length: 20 }
        }
    })
    // or
    $(#chart).dxChart({
        valueAxis: {
            wholeRange: { endValue: 70, length: 20 }
        }
    })
    Angular
    app.component.html
    <dx-chart>
        <dxo-value-axis [wholeRange]="{ startValue: 50, length: 20 }" ></dxo-value-axis>
    </dx-chart>
    <!-- or -->
    <dx-chart>
        <dxo-value-axis [wholeRange]="{ endValue: 70, length: 20 }" ></dxo-value-axis>
    </dx-chart>
    Vue

    The following code snippet demonstrates wholeRange defined as an attribute of <DxValueAxis>:

    App.vue
    <DxChart>
        <DxValueAxis :wholeRange="{ startValue: 50, length: 20 }" />
    </DxChart>
    <!-- or -->
    <DxChart>
        <DxValueAxis :wholeRange="{ endValue: 70, length: 20 }" />
    </DxChart>

    The following code snippet demonstrates wholeRange defined as a selector (<DxWholeRange>):

    <DxChart>
        <DxValueAxis>
            <DxWholeRange startValue="50" length="20" />
        </DxValueAxis>
    </DxChart>
    <!-- or -->
    <DxChart>
        <DxValueAxis>
            <DxWholeRange endValue="70" length="20" />
        </DxValueAxis>
    </DxChart>
    React

    The following code snippet demonstrates wholeRange defined as an attribute of <ValueAxis>:

    App.tsx
    <Chart>
        <ValueAxis wholeRange={{ startValue: 50, length: 20 }} />
    <Chart>
    <!-- or -->
    <Chart>
        <ValueAxis wholeRange={{ endValue: 70, length: 20 }} />
    <Chart>

    The following code snippet demonstrates wholeRange defined as a selector (<WholeRange>):

    <Chart>
        <ValueAxis>
            <WholeRange startValue="50" length="20" />
        </ValueAxis>
    <Chart>
    <!-- or -->
    <Chart>
        <ValueAxis>
            <WholeRange endValue="70" length="20" />
        </ValueAxis>
    <Chart>

    If you specify only length, the component defines the endValue property as the largest scale value.

Angular
NOTE
The component does not support wholeRange properties defined as dxo- selectors.
See Also

endValue

The range's end value.

Type:

Number

|

Date

|

String

| undefined
Default Value: undefined
Raised Events: onOptionChanged

length

The range's 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