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>

DevExtreme HTML5 JavaScript Charts ArgumentAxis ValueAxis

See Also