Axis customization in React Chart component

3 Feb 202624 minutes to read

Axis Crossing

An axis can be positioned dynamically within the chart area using the crossesAt and crossesInAxis properties. The crossesAt property specifies the value (datetime, numeric, or logarithmic) at which the axis line intersects another axis, while the crossesInAxis property defines the name of the axis with which the current axis should intersect. This customization is useful for emphasizing specific reference points or thresholds in the chart.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
    const primaryxAxis = { crossesAt: 15 };
    const primaryyAxis = { crossesAt: 5 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { stripData } from './datasource';
function App() {
  const primaryxAxis: AxisModel = { crossesAt: 15 };
  const primaryyAxis: AxisModel = { crossesAt: 5 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={stripData} xName='x' yName='y' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let stripData = [
    { x: 1,  y: 20 },
    { x: 2,  y: 22 },
    { x: 3,  y: 0 },
    { x: 4,  y: 12 },
    { x: 5,  y: 5 },
    { x: 6,  y: 15 },
    { x: 7,  y: 6 },
    { x: 8,  y: 12 },
    { x: 9,  y: 34 },
    { x: 10, y: 7 }
];
export let stripData: Object[] = [
    { x: 1,  y: 20 },
    { x: 2,  y: 22 },
    { x: 3,  y: 0 },
    { x: 4,  y: 12 },
    { x: 5,  y: 5 },
    { x: 6,  y: 15 },
    { x: 7,  y: 6 },
    { x: 8,  y: 12 },
    { x: 9,  y: 34 },
    { x: 10, y: 7 }
];

Title

A title can be added to an axis using the title property. Axis titles provide context and help users quickly understand the data represented along the axis.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category', title: 'Countries', titleStyle: {
            size: '16px', color: 'blue', fontFamily: 'Segoe UI', fontWeight: 'bold'
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category', title: 'Countries', titleStyle: {
      size: '16px', color: 'blue', fontFamily: 'Segoe UI', fontWeight: 'bold'
    }
  };
  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Title Rotation

The orientation of the axis title can be adjusted using the titleRotation property. This property supports rotation values from 0 to 360 degrees, allowing better alignment based on the chart layout and available space.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
class App extends React.Component {
    primaryxAxis = {
        valueType: 'Category', title: 'Countries', titleRotation: 90, titleStyle: {
            size: '16px', color: 'blue', fontFamily: 'Segoe UI', fontWeight: 'bold'
        }
    };
    render() {
        return <ChartComponent id='charts' primaryXAxis={this.primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
class App extends React.Component<{}, {}> {
  public primaryxAxis: AxisModel = {
    valueType: 'Category', title: 'Countries', titleRotation: 90, titleStyle: {
      size: '16px', color: 'blue', fontFamily: 'Segoe UI', fontWeight: 'bold'
    }
  };
  render() {
    return <ChartComponent id='charts'
      primaryXAxis={this.primaryxAxis}>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 }, 
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 }, 
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 }, 
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 }, 
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 }, 
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 }, 
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 }, 
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 }, 
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Tick Lines Customization

The appearance of both major and minor tick lines can be customized using the majorTickLines and minorTickLines properties. These properties allow customization of the width, color, and size of tick lines to enhance chart readability.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        majorTickLines: {
            color: 'blue',
            width: 5
        },
        minorTickLines: {
            color: 'red',
            width: 0
        }
    };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)',
        majorTickLines: {
            color: 'blue',
            width: 5
        },
        minorTickLines: {
            color: 'red',
            width: 0
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Temperature flow over months'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' name='Sales' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    majorTickLines: {
      color: 'blue',
      width: 5
    },
    minorTickLines: {
      color: 'red',
      width: 0
    }
  };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)',
    majorTickLines: {
      color: 'blue',
      width: 5
    },
    minorTickLines: {
      color: 'red',
      width: 0
    }
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Temperature flow over months'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' name='Sales' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Grid Lines Customization

Grid lines can be styled using the majorGridLines and minorGridLines properties. These options support customization of width, color, and dashArray, helping users distinguish data points and scales more effectively.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';
function App() {
    const primaryxAxis = {
        valueType: 'Category',
        majorGridLines: {
            color: 'blue',
            width: 1
        },
        minorGridLines: {
            color: 'red',
            width: 0
        }
    };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)',
        majorGridLines: {
            color: 'blue',
            width: 1
        },
        minorGridLines: {
            color: 'red',
            width: 0
        }
    };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Temperature flow over months'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' name='Sales' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { categoryData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = {
    valueType: 'Category',
    majorGridLines: {
      color: 'blue',
      width: 1
    },
    minorGridLines: {
      color: 'red',
      width: 0
    }
  };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)',
    majorGridLines: {
      color: 'blue',
      width: 1
    },
    minorGridLines: {
      color: 'red',
      width: 0
    }
  };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Temperature flow over months'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={categoryData} xName='country' yName='gold' name='Sales' type='Column'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let categoryData = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];
export let categoryData: Object[] = [
    { country: "Russia",        gold: 50, silver: 70, bronze: 45 },
    { country: "China",         gold: 40, silver: 60, bronze: 55 },
    { country: "Japan",         gold: 70, silver: 60, bronze: 50 },
    { country: "Australia",     gold: 60, silver: 56, bronze: 40 },
    { country: "France",        gold: 50, silver: 45, bronze: 35 },
    { country: "Germany",       gold: 40, silver: 30, bronze: 22 },
    { country: "Italy",         gold: 40, silver: 35, bronze: 37 },
    { country: "United States", gold: 30, silver: 25, bronze: 27 }
];

Multiple Axis

In addition to the primary X and Y axes, multiple additional axes can be added to a chart. Each series can be associated with a specific axis by mapping it to the axis using a unique axis name. This is useful for visualizing datasets with different units or scales within the same chart.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { PaneData } from './datasource';
function App() {
    const primaryxAxis = { valueType: 'Category' };
    const primaryyAxis = {
        title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 10,
        lineStyle: { width: 0 }, labelFormat: '{value}°F'
    };
    const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
    const lines = { width: 0 };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Temperature flow over months'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]}/>
      <AxesDirective>
        <AxisDirective rowIndex={0} name='yAxis1' opposedPosition={true} title='Temperature (Celsius)' majorGridLines={lines} lineStyle={lines}>
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={PaneData} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={PaneData} xName='x' yName='y1' name='Japan' type='Line' marker={marker} yAxisName='yAxis1'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection } from '@syncfusion/ej2-react-charts';
import { PaneData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { valueType: 'Category' };
  const primaryyAxis: AxisModel = {
    title: 'Temperature (Fahrenheit)', minimum: 0, maximum: 90, interval: 10,
    lineStyle: { width: 0 }, labelFormat: '{value}°F'
  };
  const marker = { visible: true, width: 10, height: 10, border: { width: 2, color: '#F8AB1D' } };
  const lines = { width: 0 };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Temperature flow over months'>
      <Inject services={[ColumnSeries, LineSeries, Legend, Tooltip, DataLabel, Category]} />
      <AxesDirective>
        <AxisDirective rowIndex={0} name='yAxis1' opposedPosition={true} title='Temperature (Celsius)'
          majorGridLines={lines} lineStyle={lines} >
        </AxisDirective>
      </AxesDirective>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={PaneData} xName='x' yName='y' name='Germany' type='Column'>
        </SeriesDirective>
        <SeriesDirective dataSource={PaneData} xName='x' yName='y1' name='Japan' type='Line'
          marker={marker} yAxisName='yAxis1' >
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let PaneData = [
    { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 }, { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 }, { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];
export let PaneData: Object[] = [
    { x: 'Jan', y: 15, y1: 33 }, { x: 'Feb', y: 20, y1: 31 }, 
    { x: 'Mar', y: 35, y1: 30 }, { x: 'Apr', y: 40, y1: 28 }, 
    { x: 'May', y: 80, y1: 29 }, { x: 'Jun', y: 70, y1: 30 },
    { x: 'Jul', y: 65, y1: 33 }, { x: 'Aug', y: 55, y1: 32 }, 
    { x: 'Sep', y: 50, y1: 34 }, { x: 'Oct', y: 30, y1: 32 }, 
    { x: 'Nov', y: 35, y1: 32 }, { x: 'Dec', y: 35, y1: 31 }
];

Inversed Axis

When an axis is inversed, the highest value is displayed closer to the origin, and the lowest value appears farther away. This behavior can be enabled by setting the isInversed property to true. Inversed axes are commonly used in scenarios such as ranking or inverted value representations.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, DataLabel } from '@syncfusion/ej2-react-charts';
import { inverseData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', opposedPosition: true, isInversed: true };
    const primaryyAxis = { title: 'Exchange rate (INR per USD)', isInversed: true };
    const marker = { dataLabel: { visible: true } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Exchange Rate'>
      <Inject services={[ColumnSeries, Category, Legend, DataLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={inverseData} xName='x' yName='y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, DataLabel } from '@syncfusion/ej2-react-charts';
import { inverseData } from './datasource';
function App() {

  const primaryxAxis: AxisModel = { title: 'Years', opposedPosition: true, isInversed: true };
  const primaryyAxis: AxisModel = { title: 'Exchange rate (INR per USD)', isInversed: true };
  const marker = { dataLabel: { visible: true } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Exchange Rate'>
      <Inject services={[ColumnSeries, Category, Legend, DataLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={inverseData} xName='x' yName='y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
  
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let inverseData = [
    { x: 2008, y: 15.1 }, 
    { x: 2009, y: 16 }, 
    { x: 2010, y: 21.4 },
    { x: 2011, y: 18 }, 
    { x: 2012, y: 16.2 }, 
    { x: 2013, y: 11 },
    { x: 2014, y: 7.6 }, 
    { x: 2015, y: 1.5 }
];
export let inverseData: Object[] = [
    { x: 2008, y: 15.1 }, 
    { x: 2009, y: 16 }, 
    { x: 2010, y: 21.4 },
    { x: 2011, y: 18 }, 
    { x: 2012, y: 16.2 }, 
    { x: 2013, y: 11 },
    { x: 2014, y: 7.6 }, 
    { x: 2015, y: 1.5 }
];

Opposed Position

An axis can be placed on the opposite side of its default position by setting the opposedPosition property to true. This option is useful when displaying multiple axes or when optimizing space usage in complex chart layouts.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, DataLabel } from '@syncfusion/ej2-react-charts';
import { inverseData } from './datasource';
function App() {
    const primaryxAxis = { title: 'Years', opposedPosition: true };
    const primaryyAxis = { title: 'Exchange rate (INR per USD)' };
    const marker = { dataLabel: { visible: true } };
    return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Exchange Rate'>
      <Inject services={[ColumnSeries, Category, Legend, DataLabel]}/>
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={inverseData} xName='x' yName='y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, DataLabel } from '@syncfusion/ej2-react-charts';
import { inverseData } from './datasource';

function App() {

  const primaryxAxis: AxisModel = { title: 'Years', opposedPosition: true };
  const primaryyAxis: AxisModel = { title: 'Exchange rate (INR per USD)' };
  const marker = { dataLabel: { visible: true } };

  return <ChartComponent id='charts'
      primaryXAxis={primaryxAxis}
      primaryYAxis={primaryyAxis}
      title='Exchange Rate'>
      <Inject services={[ColumnSeries, Category, Legend, DataLabel]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={inverseData} xName='x' yName='y' type='Column' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>

};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
export let inverseData = [
    { x: 2008, y: 15.1 }, 
    { x: 2009, y: 16 }, 
    { x: 2010, y: 21.4 },
    { x: 2011, y: 18 }, 
    { x: 2012, y: 16.2 }, 
    { x: 2013, y: 11 },
    { x: 2014, y: 7.6 }, 
    { x: 2015, y: 1.5 }
];
export let inverseData: Object[] = [
    { x: 2008, y: 15.1 }, 
    { x: 2009, y: 16 }, 
    { x: 2010, y: 21.4 },
    { x: 2011, y: 18 }, 
    { x: 2012, y: 16.2 }, 
    { x: 2013, y: 11 },
    { x: 2014, y: 7.6 }, 
    { x: 2015, y: 1.5 }
];