Angular Chart - Axis Labels

Axis labels display values indicated by major axis ticks.

DevExtreme HTML5 JavaScript Charts AxisLabels

You can configure axis labels using the label object. It comprises properties that specify the alignment, font, text, and other attributes of axis labels. Pay particular attention to the displayMode property that allows you to rotate or stagger axis labels.

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 property is overlappingBehavior. It allows you to decide how axis labels should behave when they overlap each other.

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

Angular Chart - Axis Labels

See Also