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.
App.vue
- <template>
- <DxChart ... >
- <DxArgumentAxis> <!-- or DxValueAxis, or DxCommonAxisSettings -->
- <DxLabel
- :staggering-spacing="10"
- display-mode="stagger"
- />
- </DxArgumentAxis>
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxArgumentAxis,
- DxLabel
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxArgumentAxis,
- DxLabel
- }
- }
- </script>
Another noteworthy option is overlappingBehavior. It allows you to decide how axis labels should behave when they overlap each other.
App.vue
- <template>
- <DxChart ... >
- <DxArgumentAxis> <!-- or DxValueAxis, or DxCommonAxisSettings -->
- <DxLabel
- :rotation-angle="45"
- overlapping-behavior="rotate"
- />
- </DxArgumentAxis>
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxArgumentAxis,
- DxLabel
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxArgumentAxis,
- DxLabel
- }
- }
- </script>
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.