constantLines label

    Configures the constant line label.

    Type: Object

    The constant line label displays the value of the constant line.

    DevExtreme HTML5 Charts ConstantLine ConstantLineLabel

    See Also
    • argumentAxis | constantLineStyle | label - specifies a unified style for the labels of those constant lines that belong to the argument axis.
    • commonAxisSettings | constantLineStyle | label - specifies a unified style for the labels of all constant lines in the widget.

    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, each argument axis constant line label is aligned differently using the horizontalAlignment option.

    <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: 1968,
                        label: { horizontalAlignment: 'left' }
                    }, {
                        value: 2013,
                        label: { horizontalAlignment: 'right' }
                    }
                ]
            }
        });
    });

    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

    In this example, the "2013" label is placed outside the chart plot using the position option.

    <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: 2013,
                        label: {
                            position: 'outside',
                            text: 'now'
                        }
                    }
                ]
            }
        });
    });

    text

    Specifies the text of a constant line label. By default, equals to the value of the constant line.

    Type: String
    Default Value: undefined

    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, each argument axis constant line label is aligned differently using the verticalAlignment option.

    <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,
                        label: { verticalAlignment: 'bottom' }
                    }, {
                        value: 1984,
                        label: { verticalAlignment: 'center' }
                    }, {
                        value: 2013,
                        label: { verticalAlignment: 'top' }
                    }
                ]
            }
        });
    });

    visible

    Makes constant line labels visible.

    Type: Boolean
    Default Value: true