Vue Chart - 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.

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 property to be set.

jQuery
JavaScript
$(function() {
    $("#chartContainer").dxChart({
        // ...
        argumentAxis: {
            constantLines: [
                { value: 100 },
                { value: 50 }
            ]
        },
        valueAxis: {
            constantLines: [
                { value: 40 },
                { value: 70 }
            ]
        }
    });
});
Angular
HTML
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis>
            <DxConstantLine :value="100"/>
            <DxConstantLine :value="50"/>
        </DxArgumentAxis>
        <DxValueAxis>
            <DxConstantLine :value="40"/>
            <DxConstantLine :value="70"/>
        </DxValueAxis>
    </DxChart>
</template>

<script>
import DxChart, {
    DxArgumentAxis,
    DxValueAxis,
    DxConstantLine
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxArgumentAxis,
        DxValueAxis,
        DxConstantLine
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    ArgumentAxis,
    ValueAxis,
    ConstantLine
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis>
                    <ConstantLine value={100}/>
                    <ConstantLine value={50}/>
                </ArgumentAxis>
                <ValueAxis>
                    <ConstantLine value={40}/>
                    <ConstantLine value={70}/>
                </ValueAxis>
            </Chart>
        );
    }
}

export default App;

If several constant lines should have a uniform style, you can specify it using one of the following objects.

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
TypeScript
<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
    ],
    // ...
})
Vue
App.vue
<template> 
    <DxChart ... >
        <DxArgumentAxis ... >
            <DxConstantLine ... >
                <!-- high priority -->
            </DxConstantLine>
            <DxConstantLineStyle ... >
                <!-- middle priority -->
            </DxConstantLineStyle>
        </DxArgumentAxis>
        <DxValueAxis ... >
            <DxConstantLine ... >
                <!-- high priority -->
            </DxConstantLine>
            <DxConstantLineStyle ... >
                <!-- middle priority -->
            </DxConstantLineStyle>
        </DxValueAxis>
        <DxCommonAxisSettings>
            <DxConstantLineStyle ... >
                <!-- low priority -->
            </DxConstantLineStyle>
        </DxCommonAxisSettings>
    </DxChart>
</template>

<script>
import DxChart, {
    DxCommonAxisSettings,
    DxArgumentAxis,
    DxValueAxis,
    DxConstantLine,
    DxConstantLineStyle
} from 'devextreme-vue/chart';

export default {
    components: {
        DxChart,
        DxCommonAxisSettings,
        DxArgumentAxis,
        DxValueAxis,
        DxConstantLine,
        DxConstantLineStyle
    }
}
</script>
React
App.js
import React from 'react';
import Chart, {
    CommonAxisSettings,
    ArgumentAxis,
    ValueAxis,
    ConstantLine,
    ConstantLineStyle
} from 'devextreme-react/chart';

class App extends React.Component {
    render() {
        return (
            <Chart ... >
                <ArgumentAxis ... >
                    <ConstantLine ... >
                        {/* high priority */}
                    </ConstantLine>
                    <ConstantLineStyle ... >
                        {/* middle priority */}
                    </ConstantLineStyle>
                </ArgumentAxis>
                <ValueAxis ... >
                    <ConstantLine ... >
                        {/* high priority */}
                    </ConstantLine>
                    <ConstantLineStyle ... >
                        {/* middle priority */}
                    </ConstantLineStyle>
                </ValueAxis>
                <CommonAxisSettings>
                    <ConstantLineStyle ... >
                        {/* low priority */}
                    </ConstantLineStyle>
                </CommonAxisSettings>
            </Chart>
        );
    }
}

export default App;

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

View Demo

See Also