Vue Chart - Rotate and Invert the Chart

When the Chart is rotated, its axes are swapped around.

DevExtreme HTML5 JavaScript Charts DevExtreme HTML5 JavaScript Charts RotatedChart

To rotate the Chart, set the rotated property to true.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        rotated: true
    });
});
Angular
HTML
TypeScript
<dx-chart ...
    [rotated]="true">
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart
        :rotated="true"
        ...
    >
    </DxChart>
</template>

<script>
import DxChart from 'devextreme-vue/chart';

export default {
    components: {
        DxChart
    }
}
</script>
React
App.js
import React from 'react';
import Chart from 'devextreme-react/chart';

export default function App() {
    return (
        <Chart
            rotated={true}
            ...
        >
        </Chart>
    );
}

Besides being swapped around, chart axes can be inverted, or "mirrored".

DevExtreme HTML5 JavaScript Charts DevExtreme HTML5 JavaScript Charts InvertedArgumentAxis DevExtreme HTML5 JavaScript Charts InvertedValueAxis

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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        commonAxisSettings: {
            inverted: true
        },
        // or for a specific axis
        argumentAxis: {
            inverted: true
        },
        valueAxis: {
            inverted: true
        }
    });
});
Angular
HTML
TypeScript
<dx-chart ... >
    <dxo-chart-common-axis-settings [inverted]="true"></dxo-chart-common-axis-settings>
    <!-- or for a specific axis -->
    <dxo-chart-argument-axis [inverted]="true"></dxo-chart-argument-axis>
    <dxi-chart-value-axis [inverted]="true"></dxi-chart-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxChartModule
    ],
    // ...
})
Vue
App.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
App.js
import React from 'react';
import Chart, {
    CommonAxisSettings,
    ArgumentAxis,
    ValueAxis
} from 'devextreme-react/chart';

export default function App() {
    return (
        <Chart ... >
            <CommonAxisSettings inverted={true} />
            {/* or for a specific axis */}
            <ArgumentAxis inverted={true} />
            <ValueAxis inverted={true} />
        </Chart>
    );
}
See Also