React Chart - Rotate and Invert the Chart
When the Chart is rotated, its axes are swapped around.
To rotate the Chart, set the rotated property to true.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... rotated: true }); });
Angular
<dx-chart ... [rotated]="true"> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart :rotated="true" ... > </DxChart> </template> <script> import DxChart from 'devextreme-vue/chart'; export default { components: { DxChart } } </script>
React
import React from 'react'; import Chart from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart rotated={true} ... > </Chart> ); } } export default App;
Besides being swapped around, chart axes can be inverted, or "mirrored".
To invert both argument and value axes, assign true to the inverted property of the commonAxisSettings object. The same property declared in the argumentAxis or valueAxis object inverts a specific axis.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... commonAxisSettings: { inverted: true }, // or for a specific axis argumentAxis: { inverted: true }, valueAxis: { inverted: true } }); });
Angular
<dx-chart ... > <dxo-common-axis-settings [inverted]="true"></dxo-common-axis-settings> <!-- or for a specific axis --> <dxo-argument-axis [inverted]="true"></dxo-argument-axis> <dxi-value-axis [inverted]="true"></dxi-value-axis> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Vue
<template> <DxChart ... > <DxCommonAxisSettings :inverted="true"/> <!-- or for a specific axis --> <DxArgumentAxis :inverted="true"/> <DxValueAxis :inverted="true"/> </DxChart> </template> <script> import DxChart, { DxCommonAxisSettings, DxArgumentAxis, DxValueAxis } from 'devextreme-vue/chart'; export default { components: { DxChart, DxCommonAxisSettings, DxArgumentAxis, DxValueAxis } } </script>
React
import React from 'react'; import Chart, { CommonAxisSettings, ArgumentAxis, ValueAxis } from 'devextreme-react/chart'; class App extends React.Component { render() { return ( <Chart ... > <CommonAxisSettings inverted={true} /> {/* or for a specific axis */} <ArgumentAxis inverted={true} /> <ValueAxis inverted={true} /> </Chart> ); } } export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.