React Chart - Limit and Relocate the Axes

The visual range of arguments/values on an axis should include all arguments/values of all series. If you want to reduce the visual range, specify the axis's visualRange property.

App.js
  • import React from 'react';
  • import Chart, {
  • ArgumentAxis
  • } from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • visualRange = [1950, 2000];
  •  
  • render() {
  • return (
  • <Chart ... >
  • <ArgumentAxis
  • defaultVisualRange={this.visualRange}
  • />
  • </Chart>
  • );
  • }
  • }
  •  
  • export default App;

Axes can be relocated to their opposite side using the position property. Note that available positions for each axis depend on whether the chart is rotated or not.

App.js
  • import React from 'react';
  • import Chart, {
  • ArgumentAxis,
  • ValueAxis
  • } from 'devextreme-react/chart';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Chart ... >
  • <ArgumentAxis position="top" />
  • <ValueAxis position="right" />
  • </Chart>
  • );
  • }
  • }
  •  
  • export default App;

DevExtreme HTML5 JavaScript Charts ArgumentAxis ValueAxis

See Also