React Chart - 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

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

  Angular

  app.component.html

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

  Vue

  App.vue

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

  React

  App.tsx

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

• An object with the startValue and endValue fields

  An alternative to the two-item array.

  jQuery

  index.js

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

  Angular

  app.component.html

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

  Vue

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

  App.vue

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

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

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

  React

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

  App.tsx

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

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

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

  Angular

  app.component.html

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

  Vue

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

  App.vue

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

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

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

  React

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

  App.tsx

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

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

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

  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.

The specified visual range is adjusted automatically when the argument axis is zoomed and panned. Set adjustOnZoom to false to disable this behavior.

See Also

• Visual and Whole Ranges
• visualRangeUpdateMode
• Axis.visualRange()
• zoomAndPan
• onZoomStart | onZoomEnd
• valueMarginsEnabled
• endOnTick

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