Angular 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.
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".
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.
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
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.