constantLineStyle label

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

    Type: Object

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

    DevExtreme HTML5 Charts ConstantLine ConstantLineLabel

    See Also
    • valueAxis | constantLines[] | label - configures the labels of individual constant lines. Overrides the options of the valueAxis | 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: 'left'
    Accepted Values: 'right' | 'center' | 'left'

    Show Example:
    jQuery

    Use the drop-down menu below to change the value of the horizontalAlignment 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 Horizontal Alignment:
        <select id="dropdownListSelector">
            <option value="left">left</option>
            <option value="center">center</option>
            <option value="right">right</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' }
            ],
            valueAxis: {
                constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
                constantLineStyle: {
                    label: {
                        horizontalAlignment: 'left'
                    }
                }
            }
        });
    
        $("#dropdownListSelector").change(function () {
            var chart = $("#chartContainer").dxChart("instance");
            chart.option({
                valueAxis: {
                    constantLineStyle: {
                        label: { horizontalAlignment: this.value }
                    }
                }
            });
        });
    });

    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:20px;max-width:350px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px;text-align:center">
        Value 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' }
            ],
            valueAxis: {
                constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
                constantLineStyle: {
                    label: {
                        position: 'inside'
                    }
                }
            }
        });
    
        $("#dropdownListSelector").change(function () {
            var chart = $("#chartContainer").dxChart("instance");
            chart.option({
                valueAxis: {
                    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

    In this example, the value axis constant line labels are aligned to the bottom of the constant lines.

    <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' }
            ],
            valueAxis: {
                constantLines: [{ value: 500 }, { value: 750 }, { value: 1000 }],
                constantLineStyle: {
                    label: {
                        verticalAlignment: 'bottom'
                    }
                }
            }
        });
    });

    visible

    Makes constant line labels visible.

    Type: Boolean
    Default Value: true