DevExtreme React - 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
    ],
    // ...
})

DevExtreme HTML5 JavaScript Charts ArgumentAxis ValueAxis

See Also