DevExtreme Vue - Axis Labels
Axis labels display values indicated by major axis ticks.
You can configure axis labels using the label object. It comprises options that specify the alignment, font, text, and other attributes of axis labels. Pay particular attention to the displayMode option that allows you to rotate or stagger axis labels.
jQuery
JavaScript
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis, or commonAxisSettings label: { displayMode: "stagger", staggeringSpacing: 10 } } }); });
Angular
HTML
TypeScript
<dx-chart ... > <dxo-argument-axis> <!-- or dxi-value-axis, or dxo-common-axis-settings --> <dxo-label displayMode="stagger" [staggeringSpacing]="10"> </dxo-label> </dxo-argument-axis> </dx-chart>
import { DxChartModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxChartModule ], // ... })
Another noteworthy option is overlappingBehavior. It allows you to decide how axis labels should behave when they overlap each other.
jQuery
JavaScript
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis, or commonAxisSettings label: { overlappingBehavior: "rotate", rotationAngle: 45 } } }); });
Angular
HTML
TypeScript
<dx-chart ... > <dxo-argument-axis> <!-- or dxi-value-axis, or dxo-common-axis-settings --> <dxo-label overlappingBehavior="rotate" [rotationAngle]="45"> </dxo-label> </dxo-argument-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.