DevExtreme jQuery - Constant Lines
A constant line is a straight line that extends over the entire Chart and indicates an axis value. Constant lines are always perpendicular to the axis to which they belong.
To configure the constant lines, declare the constantLines array in the argumentAxis or valueAxis object. This array should contain objects, and each one of them configures a single constant line. A constant line demands at least the value option to be set.
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: {
constantLines: [
{ value: 100 },
{ value: 50 }
]
},
valueAxis: {
constantLines: [
{ value: 40 },
{ value: 70 }
]
}
});
});Angular
<dx-chart ... >
<dxo-argument-axis>
<dxi-constant-line [value]="100"></dxi-constant-line>
<dxi-constant-line [value]="50"></dxi-constant-line>
</dxo-argument-axis>
<dxi-value-axis>
<dxi-constant-line [value]="40"></dxi-constant-line>
<dxi-constant-line [value]="70"></dxi-constant-line>
</dxi-value-axis>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})If several constant lines should have a uniform style, you can specify it using one of the following objects.
argumentAxis.constantLineStyle
Style for constant lines belonging to the argument axis.valueAxis.constantLineStyle
Style for constant lines belonging to the value axis.commonAxisSettings.constantLineStyle
Style for all constant lines in the Chart.
Note that individual settings override axis-specific settings which, in turn, override common settings.
jQuery
$(function() {
$("#chartContainer").dxChart({
// ...
argumentAxis: {
constantLines: [
// high priority
],
constantLineStyle: {
// middle priority
}
},
valueAxis: {
constantLines: [
// high priority
],
constantLineStyle: {
// middle priority
}
},
commonAxisSettings: {
constantLineStyle: {
// low priority
}
}
});
});Angular
<dx-chart ... >
<dxo-argument-axis>
<dxi-constant-line ... >
<!-- high priority -->
</dxi-constant-line>
<dxo-constant-line-style ... >
<!-- middle priority -->
</dxo-constant-line-style>
</dxo-argument-axis>
<dxi-value-axis>
<dxi-constant-line ... >
<!-- high priority -->
</dxi-constant-line>
<dxo-constant-line-style ... >
<!-- middle priority -->
</dxo-constant-line-style>
</dxi-value-axis>
<dxo-common-axis-settings>
<dxo-constant-line-style ... >
<!-- low priority -->
</dxo-constant-line-style>
</dxo-common-axis-settings>
</dx-chart>
import { DxChartModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxChartModule
],
// ...
})For information about all options of the constant lines, visit the constantLines section of the API reference.