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;
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.