Vue PolarChart - valueAxis.visualRange

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: {
          visualRange: [50, 70]
      }
  })
  // Open-ended range
  $(#polarChart).dxPolarChart({
      valueAxis: {
          visualRange: [null, 70]
      }
  })

  Angular

  app.component.html

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

  Vue

  App.vue

  <DxPolarChart>
      <DxValueAxis :visualRange="[50, 70]" />
  </DxPolarChart>
  <!-- Open-ended range -->
  <DxPolarChart>
      <DxValueAxis :visualRange="[null, 70]" />
  </DxPolarChart>

  React

  App.tsx

  <PolarChart>
      <ValueAxis visualRange={[50, 70]} />
  </PolarChart>
  <!-- Open-ended range -->
  <PolarChart>
      <ValueAxis visualRange={[null, 70]} />
  </PolarChart>

• An object with the startValue and endValue fields

  An alternative to the two-item array.

  jQuery

  index.js

  $(#polarChart).dxPolarChart({
      valueAxis: {
          visualRange: { startValue: 50, endValue: 70 }
      }
  })
  // Open-ended range
  $(#polarChart).dxPolarChart({
      valueAxis: {
          visualRange: { startValue: null, endValue: 70 }
      }
  })

  Angular

  app.component.html

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

  Vue

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

  App.vue

  <DxPolarChart>
      <DxValueAxis :visualRange="{ startValue: null, endValue: 70 }" />
  </DxPolarChart>
  <!-- Open-ended range -->
  <DxPolarChart>
      <DxValueAxis :visualRange="{ startValue: null, endValue: 70 }" />
  </DxPolarChart>

  The following code snippet demonstrates visualRange defined as a <DxVisualRange> selector:

  <DxPolarChart>
      <DxValueAxis>
          <DxVisualRange startValue="50" endValue="70" />
      </DxValueAxis>
  </DxPolarChart>
  <!-- Open-ended range -->
  <DxPolarChart>
      <DxValueAxis>
          <DxVisualRange :startValue="null" endValue="70" />
      </DxValueAxis>
  </DxPolarChart>

  React

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

  App.tsx

  <PolarChart>
      <ValueAxis visualRange={{ startValue: null, endValue: 70 }} />
  </PolarChart>
  <!-- Open-ended range -->
  <PolarChart>
      <ValueAxis visualRange={{ startValue: null, endValue: 70 }} />
  </PolarChart>

  The following code snippet demonstrates visualRange defined as a <VisualRange> selector:

  <PolarChart>
      <ValueAxis>
          <VisualRange startValue="50" endValue="70" />
      </ValueAxis>
  </PolarChart>
  <!-- Open-ended range -->
  <PolarChart>
      <ValueAxis>
          <VisualRange 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: {
          visualRange: { startValue: 50, length: 20 }
      }
  })
  // or
  $(#polarChart).dxPolarChart({
      valueAxis: {
          visualRange: { endValue: 70, length: 20 }
      }
  })

  Angular

  app.component.html

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

  Vue

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

  App.vue

  <DxPolarChart>
      <DxValueAxis :visualRange="{ startValue: 50, length: 20 }" />
  </DxPolarChart>
  <!-- or -->
  <DxPolarChart>
      <DxValueAxis :visualRange="{ endValue: 70, length: 20 }" />
  </DxPolarChart>

  The following code snippet demonstrates visualRange defined as a selector (<DxVisualRange>):

  <DxPolarChart>
      <DxValueAxis>
          <DxVisualRange startValue="50" length="20" />
      </DxValueAxis>
  </DxPolarChart>
  <!-- or -->
  <DxPolarChart>
      <DxValueAxis>
          <DxVisualRange endValue="70" length="20" />
      </DxValueAxis>
  </DxPolarChart>

  React

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

  App.tsx

  <PolarChart>
      <ValueAxis visualRange={{ startValue: 50, length: 20 }} />
  <PolarChart>
  <!-- or -->
  <PolarChart>
      <ValueAxis visualRange={{ endValue: 70, length: 20 }} />
  <PolarChart>

  The following code snippet demonstrates visualRange defined as a selector (<VisualRange>):

  <PolarChart>
      <ValueAxis>
          <VisualRange startValue="50" length="20" />
      </ValueAxis>
  <PolarChart>
  <!-- or -->
  <PolarChart>
      <ValueAxis>
          <VisualRange endValue="70" length="20" />
      </ValueAxis>
  <PolarChart>

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

To specify the minimum visual range that a user can set, use the minVisualRangeLength property.

View Demo

See Also

• visualRangeUpdateMode
• onZoomStart | onZoomEnd

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