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.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis min: 1950, max: 2000, valueMarginsEnabled: false } }); });
Angular
<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.
jQuery
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { position: 'top' }, valueAxis: { position: 'right' } }); });
Angular
<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 ], // ... })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.