DevExtreme jQuery/JS - 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
Select one or more answers