constantLineStyle label

    An object defining constant line label options.

    Type: Object

    This object configures all the constant line labels of the argument axis. A constant line label shows information on the constant line. Within the label object, you can configure position, text and font options using corresponding fields. In addition, you can specify the horizontal and vertical alignments for the label.

    To configure styles for the constant line labels of the argument and value axis simultaneously, use the commonAxisSettings | constantLineStyle | label object.

    In addition, you can define the appearance of each constant line label individually. For more information, refer to the argumentAxis | constantLines | label object description.

    NOTE: The options specified within the argumentAxis | constantLines | label object override the corresponding options specified within the argumentAxis | constantLineStyle | label object. In turn, the options specified within the argumentAxis | constantLineStyle | label object override the options specified within the commonAxisSettings | constantLineStyle | label object.

    Show Example:
    jQuery

    In the following example, the argument axis constant line labels are positioned outside the chart. In addition, these labels are drawn in the rosybrown color.

    <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: {
                        position: 'outside',
                        font: {
                            color: 'rosybrown'
                        }
                    }
                }
            }
        });
    });

    font

    Specifies font options for a constant line label.

    Type: Object

    Show Example:
    jQuery

    In this example, a number of font options for the argument axis constant line labels is changed.

    <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: {
                        font: {
                            color: 'rosybrown',
                            family: 'Zapf-Chancery, cursive',
                            opacity: 0.55,
                            size: 10,
                            weight: 700
                        }
                    }
                }
            }
        });
    });

    horizontalAlignment

    Specifies the horizontal alignment of a constant line label.

    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 the constant line label relative to the chart plot.

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

    By default, a constant line label is displayed inside the chart plot near the constant line it belongs to. You can place the label outside the plot by setting 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

    Specifies the vertical alignment of a constant line label.

    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

    Indicates whether or not to display labels for the axis constant lines.

    Type: Boolean
    Default Value: true

    Show Example:
    jQuery

    Use the check box at the bottom to change the visibility of the constant line labels.

    <div id="chartContainer" style="height:500px; max-width:700px; margin: 0 auto"></div>
    <div id="checkboxContainer" style="height:40px;width:200px;margin:5px auto;font-family:'Trebuchet MS',Arial,sans-serif;font-size:14px">
        <input type="checkbox" id="visibleLabelsCheckbox" checked> Show constant line labels
    </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: 'outside',
                        font: {
                            color: 'rosybrown'
                        }
                    }
                }
            }
        });
    
        $('#visibleLabelsCheckbox').change(function () {
            var chart = $('#chartContainer').dxChart('instance');
            chart.option({
                argumentAxis: {
                    constantLineStyle: {
                        label: { visible: this.checked }
                    }
                }
            });
        });
    });