Angular Chart - argumentAxis.wholeRange

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

  jQuery

  index.js

   $(#chart).dxChart({ argumentAxis: { wholeRange: [50, 70] } }) // Open-ended range $(#chart).dxChart({ argumentAxis: { wholeRange: [null, 70] } })

  Angular

  app.component.html

   <dx-chart> <dxo-argument-axis [wholeRange]="[50, 70]" ></dxo-argument-axis> </dx-chart> <!-- Open-ended range --> <dx-chart> <dxo-argument-axis [wholeRange]="[null, 70]" ></dxo-argument-axis> </dx-chart>

  Vue

  App.vue

   <DxChart> <DxArgumentAxis :wholeRange="[50, 70]" /> </DxChart> <!-- Open-ended range --> <DxChart> <DxArgumentAxis :wholeRange="[null, 70]" /> </DxChart>

  React

  App.tsx

   <Chart> <ArgumentAxis wholeRange={[50, 70]} /> </Chart> <!-- Open-ended range --> <Chart> <ArgumentAxis wholeRange={[null, 70]} /> </Chart>

• An object with the startValue and endValue fields

  An alternative to the two-item array.

  jQuery

  index.js

   $(#chart).dxChart({ argumentAxis: { wholeRange: { startValue: 50, endValue: 70 } } }) // Open-ended range $(#chart).dxChart({ argumentAxis: { wholeRange: { startValue: null, endValue: 70 } } })

  Angular

  app.component.html

   <dx-chart> <dxo-argument-axis [wholeRange]="{ startValue: 50, endValue: 70 }" ></dxo-argument-axis> </dx-chart> <!-- Open-ended range --> <dx-chart> <dxo-argument-axis [wholeRange]="{ startValue: null, endValue: 70 }" ></dxo-argument-axis> </dx-chart>

  Vue

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

  App.vue

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

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

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

  React

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

  App.tsx

   <Chart> <ArgumentAxis wholeRange={{ startValue: null, endValue: 70 }} /> </Chart> <!-- Open-ended range --> <Chart> <ArgumentAxis wholeRange={{ startValue: null, endValue: 70 }} /> </Chart>

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

  <Chart> <ArgumentAxis> <WholeRange startValue="50" endValue="70" /> </ArgumentAxis> </Chart> <!-- Open-ended range --> <Chart> <ArgumentAxis> <WholeRange startValue={null} endValue="70" /> </ArgumentAxis> </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({ argumentAxis: { wholeRange: { startValue: 50, length: 20 } } }) // or $(#chart).dxChart({ argumentAxis: { wholeRange: { endValue: 70, length: 20 } } })

  Angular

  app.component.html

   <dx-chart> <dxo-argument-axis [wholeRange]="{ startValue: 50, length: 20 }" ></dxo-argument-axis> </dx-chart> <!-- or --> <dx-chart> <dxo-argument-axis [wholeRange]="{ endValue: 70, length: 20 }" ></dxo-argument-axis> </dx-chart>

  Vue

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

  App.vue

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

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

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

  React

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

  App.tsx

   <Chart> <ArgumentAxis wholeRange={{ startValue: 50, length: 20 }} /> <Chart> <!-- or --> <Chart> <ArgumentAxis wholeRange={{ endValue: 70, length: 20 }} /> <Chart>

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

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

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

See Also

• Visual and Whole Ranges
• visualRange
• zoomAndPan

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