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
JavaScript
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { // or valueAxis min: 1950, max: 2000, valueMarginsEnabled: false } }); });
Angular
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.
jQuery
JavaScript
$(function() { $("#chartContainer").dxChart({ // ... argumentAxis: { position: 'top' }, valueAxis: { position: 'right' } }); });
Angular
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 ], // ... })
See Also
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.