All docs
V19.1
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
19.1
18.2
18.1
17.2
A newer version of this page is available. Switch to the current version.

DevExtreme jQuery - 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 option 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
    ],
    // ...
})

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 option of the commonAxisSettings object. The same option 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-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
    ],
    // ...
})
See Also