constantLineStyle label

    Specifies the appearance of the labels of those constant lines that belong to the argument axis.

    Type: Object

    A constant line label displays the value of a constant line.

    DevExtreme HTML5 Charts ConstantLine ConstantLineLabel

    See Also
    • argumentAxis | constantLines[] | label - configures the labels of individual constant lines. Overrides the options of the argumentAxis | constantLineStyle | label object, which is described here.
    • commonAxisSettings | constantLineStyle | label - specifies the appearance of all constant line labels.

    font

    Specifies font options for constant line labels.

    Type: Object

    horizontalAlignment

    Aligns constant line labels in the horizontal direction.

    Type: String
    Default Value: 'right'
    Accepted Values: 'right' | 'center' | 'left'

    Show Example:
    jQuery

    In this example, the argument axis constant line labels are aligned to the left side of the constant line.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    var dataSource = [
        { year: 2020, europe: 721, americas: 1027, africa: 1189 },
        { year: 2010, europe: 728, americas: 935, africa: 982 },
        { year: 2000, europe: 730, americas: 836, africa: 797 },
        { year: 1990, europe: 721, americas: 721, africa: 623 },
        { year: 1980, europe: 694, americas: 614, africa: 471 },
        { year: 1970, europe: 656, americas: 513, africa: 361 },
        { year: 1960, europe: 605, americas: 417, africa: 283 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    label: {
                        horizontalAlignment: 'left'
                    }
                }
            }
        });
    });

    position

    Specifies the position of constant line labels on the chart plot.

    Type: String
    Default Value: 'inside'
    Accepted Values: 'inside' | 'outside'

    By default, constant line labels are displayed inside the chart plot near the constant lines they belong to. To place the labels outside the chart plot, set the position option to "outside".

    Show Example:
    jQuery

    Use the drop-down menu below to change the position of the argument axis constant line labels.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    <div id="selectContainer" style="height:25px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        Argument Axis Constant Line Label's Position:
        <select id="dropdownListSelector">
            <option value="inside">inside</option>
            <option value="outside">outside</option>
        </select>
    </div>
    var dataSource = [
        { year: 2020, europe: 721, americas: 1027, africa: 1189 },
        { year: 2010, europe: 728, americas: 935, africa: 982 },
        { year: 2000, europe: 730, americas: 836, africa: 797 },
        { year: 1990, europe: 721, americas: 721, africa: 623 },
        { year: 1980, europe: 694, americas: 614, africa: 471 },
        { year: 1970, europe: 656, americas: 513, africa: 361 },
        { year: 1960, europe: 605, americas: 417, africa: 283 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    label: {
                        position: 'inside'
                    }
                }
            }
        });
    
        $("#dropdownListSelector").change(function () {
            var chart = $("#chartContainer").dxChart("instance");
            chart.option({
                argumentAxis: {
                    constantLineStyle: {
                        label: { position: this.value }
                    }
                }
            });
        });
    });

    verticalAlignment

    Aligns constant line labels in the vertical direction.

    Type: String
    Default Value: 'top'
    Accepted Values: 'top' | 'center' | 'bottom'

    Show Example:
    jQuery

    Use the drop-down menu below to change the value of the verticalAlignment option.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    <div id="selectContainer" style="height:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        Constant Line Label's Vertical Alignment:
        <select id="dropdownListSelector">
            <option value="top">top</option>
            <option value="center">center</option>
            <option value="bottom">bottom</option>
        </select>
    </div>
    var dataSource = [
        { year: 2020, europe: 721, americas: 1027, africa: 1189 },
        { year: 2010, europe: 728, americas: 935, africa: 982 },
        { year: 2000, europe: 730, americas: 836, africa: 797 },
        { year: 1990, europe: 721, americas: 721, africa: 623 },
        { year: 1980, europe: 694, americas: 614, africa: 471 },
        { year: 1970, europe: 656, americas: 513, africa: 361 },
        { year: 1960, europe: 605, americas: 417, africa: 283 },
        { year: 1950, europe: 546, americas: 332, africa: 227 }
    ];
    
    $(function () {
        $("#chartContainer").dxChart({
            dataSource: dataSource,
            commonSeriesSettings: {
                argumentField: 'year'
            },
            series: [
                { valueField: 'europe', name: 'Europe' },
                { valueField: 'americas', name: 'Americas' },
                { valueField: 'africa', name: 'Africa' }
            ],
            argumentAxis: {
                constantLines: [{ value: 1955 }, { value: 1992 }, { value: 2013 }],
                constantLineStyle: {
                    label: {
                        verticalAlignment: 'top'
                    }
                }
            }
        });
    
        $("#dropdownListSelector").change(function () {
            var chart = $("#chartContainer").dxChart("instance");
            chart.option({
                argumentAxis: {
                    constantLineStyle: {
                        label: { verticalAlignment: this.value }
                    }
                }
            });
        });
    });

    visible

    Makes constant line labels visible.

    Type: Boolean
    Default Value: true