Vue 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.

HTML
TypeScript
  • <dx-chart ... >
  • <dxo-argument-axis
  • [visualRange]="[1950, 2000]">
  • </dxo-argument-axis>
  • </dx-chart>
  • import { DxChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

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.

HTML
TypeScript
  • <dx-chart ... >
  • <dxo-argument-axis
  • position="top">
  • </dxo-argument-axis>
  • <dxi-value-axis
  • position="right">
  • </dxi-value-axis>
  • </dx-chart>
  • import { DxChartModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxChartModule
  • ],
  • // ...
  • })

DevExtreme HTML5 JavaScript Charts ArgumentAxis ValueAxis

See Also