DevExtreme jQuery - 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 axis's visualRange option.
jQuery
JavaScript
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: { // or valueAxis
visualRange: [1950, 2000]
}
});
});Angular
HTML
TypeScript
<dx-chart ... >
<dxo-argument-axis
[visualRange]="[1950, 2000]">
</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
Feedback