Constant Lines

A constant line is a straght line that extends over the entire Chart and indicates an axis value. Constant lines are always perpendicular to the axis to which they belong.

DevExtreme HTML5 JavaScript Charts ConstantLines

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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            constantLines: [
                { value: 100 },
                { value: 50 }
            ]
        },
        valueAxis: {
            constantLines: [
                { value: 40 },
                { value: 70 }
            ]
        }
    });
});
Angular
HTML
<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>

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
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            constantLines: [
                // high priority
            ],
            constantLineStyle: {
                // middle priority
            }
        },
        valueAxis: {
            constantLines: [
                // high priority
            ],
            constantLineStyle: {
                // middle priority
            }
        },
        commonAxisSettings: {
            constantLineStyle: {
                // low priority
            }
        }
    });
});
Angular
HTML
<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>

For information about all options of the constant lines, visit the constantLines section of the API reference.

View Demo

See Also