DevExtreme Angular - 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 min and max options of the axis. Note that if the valueMarginsEnabled option stays true, the axis extends beyond the min and max values because of margins specified by the minValueMargin and maxValueMargin options.

HTML
TypeScript
  • <dx-chart ... >
  • <dxo-argument-axis
  • [min]="1950"
  • [max]="2000"
  • [valueMarginsEnabled]="false">
  • </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 option. 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