Angular Chart - Limit and Relocate the Axes
The visual range of arguments/values on an axis should include all arguments/values of all series. If you want to reduce the visual range, specify the axis's visualRange property.
App.vue
- <template>
- <DxChart ... >
- <DxArgumentAxis
- :visual-range="[1950, 2000]"
- />
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxArgumentAxis
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxArgumentAxis
- }
- }
- </script>
Axes can be relocated to their opposite side using the position property. Note that available positions for each axis depend on whether the chart is rotated or not.
App.vue
- <template>
- <DxChart ... >
- <DxArgumentAxis position="top"/>
- <DxValueAxis position="right"/>
- </DxChart>
- </template>
- <script>
- import DxChart, {
- DxArgumentAxis,
- DxValueAxis
- } from 'devextreme-vue/chart';
- export default {
- components: {
- DxChart,
- DxArgumentAxis,
- DxValueAxis
- }
- }
- </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.