JavaScript/jQuery PolarChart - valueAxis.wholeRange
Defines the range where the axis can be zoomed.
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$(#polarChart).dxPolarChart({ valueAxis: { wholeRange: [50, 70] } }) // Open-ended range $(#polarChart).dxPolarChart({ valueAxis: { wholeRange: [null, 70] } })
Angular
app.component.html<dx-polar-chart> <dxo-value-axis [wholeRange]="[50, 70]" ></dxo-value-axis> </dx-polar-chart> <!-- Open-ended range --> <dx-polar-chart> <dxo-value-axis [wholeRange]="[null, 70]" ></dxo-value-axis> </dx-polar-chart>
Vue
App.vue<DxPolarChart> <DxValueAxis :wholeRange="[50, 70]" /> </DxPolarChart> <!-- Open-ended range --> <DxPolarChart> <DxValueAxis :wholeRange="[null, 70]" /> </DxPolarChart>
React
App.tsx<PolarChart> <ValueAxis wholeRange={[50, 70]} /> </PolarChart> <!-- Open-ended range --> <PolarChart> <ValueAxis wholeRange={[null, 70]} /> </PolarChart>
An object with the startValue and endValue fields
An alternative to the two-item array.
jQuery
index.js$(#polarChart).dxPolarChart({ valueAxis: { wholeRange: { startValue: 50, endValue: 70 } } }) // Open-ended range $(#polarChart).dxPolarChart({ valueAxis: { wholeRange: { startValue: null, endValue: 70 } } })
Angular
app.component.html<dx-polar-chart> <dxo-value-axis [wholeRange]="{ startValue: 50, endValue: 70 }" ></dxo-value-axis> </dx-polar-chart> <!-- Open-ended range --> <dx-polar-chart> <dxo-value-axis [wholeRange]="{ startValue: null, endValue: 70 }" ></dxo-value-axis> </dx-polar-chart>
Vue
The following code snippet demonstrates wholeRange defined as a
<DxValueAxis>
attribute:App.vue<DxPolarChart> <DxValueAxis :wholeRange="{ startValue: null, endValue: 70 }" /> </DxPolarChart> <!-- Open-ended range --> <DxPolarChart> <DxValueAxis :wholeRange="{ startValue: null, endValue: 70 }" /> </DxPolarChart>
The following code snippet demonstrates wholeRange defined as a
<DxWholeRange>
selector:<DxPolarChart> <DxValueAxis> <DxWholeRange startValue="50" endValue="70" /> </DxValueAxis> </DxPolarChart> <!-- Open-ended range --> <DxPolarChart> <DxValueAxis> <DxWholeRange :startValue="null" endValue="70" /> </DxValueAxis> </DxPolarChart>
React
The following code snippet demonstrates wholeRange defined as a
<ValueAxis>
attribute:App.tsx<PolarChart> <ValueAxis wholeRange={{ startValue: null, endValue: 70 }} /> </PolarChart> <!-- Open-ended range --> <PolarChart> <ValueAxis wholeRange={{ startValue: null, endValue: 70 }} /> </PolarChart>
The following code snippet demonstrates wholeRange defined as a
<WholeRange>
selector:<PolarChart> <ValueAxis> <WholeRange startValue="50" endValue="70" /> </ValueAxis> </PolarChart> <!-- Open-ended range --> <PolarChart> <ValueAxis> <WholeRange startValue={null} endValue="70" /> </ValueAxis> </PolarChart>
An object with the length and startValue or endValue
Specifies the range using length and start or end values.
jQuery
index.js$(#polarChart).dxPolarChart({ valueAxis: { wholeRange: { startValue: 50, length: 20 } } }) // or $(#polarChart).dxPolarChart({ valueAxis: { wholeRange: { endValue: 70, length: 20 } } })
Angular
app.component.html<dx-polar-chart> <dxo-value-axis [wholeRange]="{ startValue: 50, length: 20 }" ></dxo-value-axis> </dx-polar-chart> <!-- or --> <dx-polar-chart> <dxo-value-axis [wholeRange]="{ endValue: 70, length: 20 }" ></dxo-value-axis> </dx-polar-chart>
Vue
The following code snippet demonstrates wholeRange defined as an attribute of
<DxValueAxis>
:App.vue<DxPolarChart> <DxValueAxis :wholeRange="{ startValue: 50, length: 20 }" /> </DxPolarChart> <!-- or --> <DxPolarChart> <DxValueAxis :wholeRange="{ endValue: 70, length: 20 }" /> </DxPolarChart>
The following code snippet demonstrates wholeRange defined as a selector (
<DxWholeRange>
):<DxPolarChart> <DxValueAxis> <DxWholeRange startValue="50" length="20" /> </DxValueAxis> </DxPolarChart> <!-- or --> <DxPolarChart> <DxValueAxis> <DxWholeRange endValue="70" length="20" /> </DxValueAxis> </DxPolarChart>
React
The following code snippet demonstrates wholeRange defined as an attribute of
<ValueAxis>
:App.tsx<PolarChart> <ValueAxis wholeRange={{ startValue: 50, length: 20 }} /> <PolarChart> <!-- or --> <PolarChart> <ValueAxis wholeRange={{ endValue: 70, length: 20 }} /> <PolarChart>
The following code snippet demonstrates wholeRange defined as a selector (
<WholeRange>
):<PolarChart> <ValueAxis> <WholeRange startValue="50" length="20" /> </ValueAxis> <PolarChart> <!-- or --> <PolarChart> <ValueAxis> <WholeRange endValue="70" length="20" /> </ValueAxis> <PolarChart>
If you specify only length, the component defines the endValue property as the largest scale value.
Angular
dxo-
selectors.See Also
length
The range's length.
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
If you have technical questions, please create a support ticket in the DevExpress Support Center.